最簡單的方法選擇的元素

我想知道，如果有可能的風格選擇 * 李 *元素以同樣的方式你的風格是，當你在它懸停？或者你是否必須使用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？

感謝

來源

2013-02-25 David Van Staden

糾正我，如果我錯了，你正在尋找的風格聚焦元素，而不是一個選擇的元素。 – 2013-02-25 15:30:56

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

a:focus {your styling}

像jsFiddle：

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

來源

2013-02-25 15:29:21

謝謝你爲你的答案。欣賞 – 2013-02-26 04:51:13

ComputerArts的答案會更有用，但是，你回答我的問題 - 是否有一個CSS解決方案？是的，但只有錨標籤。欣賞 – 2013-02-26 04:52:36

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

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

來源

2013-02-25 15:08:48

謝謝ComputerArts。好的答案，我將使用它，因爲我正在處理li元素，但我認爲上面的答案與我的'最簡單和最好的css優先'具體問題更相關...我將使用您的代碼無論如何，欣賞 – 2013-02-26 04:53:55

最簡單的方法選擇的元素

回答

相關問題