CODEWITHSUNDEEP
jquerycss
David Van Staden
David Van Staden

Reputation: 1779

Easiest way to style selected element

Good Day

I want to know if it is possible to style a selected *li* element the same way you style it when you hover over it? Or do you have to use Javascript to assign an 'active' class to the selected item and style it like that?

HTML

<div id="areas" class="span2">
    <ul>
        <li><a href="#pretoriaDetail">Pretoria</a>
        </li>
        <li><a href="#potchDetail">Potch</a>
        </li>
        <li><a href="#jhbDetail">JHB</a>
        </li>
    </ul>
</div>
<div class="span12">
    <div class="hidden" id="pretoriaDetail">Pretoria Content</div>
    <div class="hidden" id="potchDetail">Potch Content</div>
    <div class="hidden" id="jhbDetail">JHB Content</div>
</div>

CSS:

#areas {
    margin: 0 auto;
    text-align: center;
    width: 100px;

}
#areas ul {
    list-style: none;
}
#areas ul li {
    width: 100%;
    height: 100%;
    background: #073640;
    border: 1px solid #aaa;
    margin: 10px 0px;
    padding: 20% 10%;
    /*to vertically center text inside the ul*/
    text-align: center;
}
#areas ul li:hover {
    background: #610052;
}
#areas ul li a {
    font-family:'Open Sans', 'Century Gothic', sans-serif;
    font-size: 28px;
    color: #fff;
    line-height: 100%;
    width: 100%;
    height: 100%;
}
#areasMap {
}
.hidden {
    display: none;
}

See my fiddle

If you look at my fiddle, the hover class works fine, but I want to keep the element that purple color when you actually select it - can i use plain CSS or do I have to use JS?

thanks

Upvotes: 0

Views: 75

Answers (2)

Milche Patern
Milche Patern

Reputation: 20472

Easiest way to style a focussed anchor in .css ?

a:focus {your styling}

Like jsFiddle :

#areas ul li a:focus {
    color: red;
}

Upvotes: 1

VVV
VVV

Reputation: 7593

Yes you need to add a class (for example .active) when you click on it. It will be recognized throughout all the browsers

Here's an updated fiddle

JS 

 $(function () {
     $("#areas ul a").click(function (event) {
         event.preventDefault();
         $("#areas ul li").removeClass('active'); //clears the active class for elements
         $(this).parent().addClass('active'); //adds the class to clicked li
         $(".hidden").hide(500);
         $($(this).attr("href")).show(500)
     });

 });

CSS

#areas ul li:hover,
#areas ul li.active {
    background: #610052;
}

Upvotes: 1

Related Questions