最簡單的方法選擇的元素

Question

好日子

我想知道，如果有可能的風格選擇 * 李 *元素以同樣的方式你的風格是，當你在它懸停？或者你是否必須使用Javascript來爲選定的項目分配一個「活動」類並且像這樣設計？

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; 
} 

見我fiddle

如果你看一下我的小提琴，懸停級工作正常，但我想保持的元素紫顏色當你真的選擇它 - 我可以使用普通的CSS或我必須使用JS？

感謝

Answer 1

到風格的.css聚焦的錨最簡單的方法？

a:focus {your styling} 

像jsFiddle：

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

Answer 2

是的，你需要添加一個類（例如。主動），當你點擊它。這將在所有的瀏覽器

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; 
}