目前我尝试在选中后使所选列表项保持为粗体,并在选择其他项目后恢复正常。基本上我想要一个"当前选中的标签"。有没有办法用css做这个或者我需要Javascript吗?这是我的代码 - >
CSS :(使用SASS)
.setup-nav {
float: left;
position: relative;
width: 20%;
padding-right: 20px;
box-sizing: border-box;
font-size: 18px;
color: $base-link-color;
text-align: left;
li {
border-top: none;
border-bottom: none;
&.active {
font-weight: bold;
}
}
HTML:
<ul class="setup-nav">
<li><a href="#install-http">HTTP</a></li>
<li><a href="#install-email">Email</a></li>
<li><a href="#install-ruby">Ruby</a></li>
<li><a href="#install-python">Python</a></li>
</ul>
希望有一种简单的方法可以做到这一点。
答案 0 :(得分:4)
使用jQuery:
$(".setup-nav").on( "click", "li", function(){ // attach to Click event
$(".setup-nav li.active").removeClass("active"); // reset all <li> to no active class
$(this).addClass("active"); // add active class to this <li> only
});
http://api.jquery.com/on/使用.on()
http://api.jquery.com/addClass/使用.addClass()
如果您更喜欢这种方法,有人可能会提供纯JavaScript答案(不使用jQuery库)。