[英]Font weight when active - CSS
Currently I am trying to make the selected list item STAY bold after selected and go back to normal after a different item is selected. 目前,我正在尝试将选中的列表项保持选中状态后加粗,并在选择其他项后恢复正常。 basically I want a "currently selected tab".
基本上我想要一个“当前选择的标签”。 is there a way I can do this with css or do I need Javascript?
有没有办法用CSS做到这一点,或者我需要Javascript吗? Here is my code ->
这是我的代码->
CSS: (using SASS) 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: 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>
Hopefully there is an easy way to do this. 希望有一个简单的方法可以做到这一点。
Using jQuery: 使用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/ reference for use of .on()
http://api.jquery.com/on/使用
.on()
http://api.jquery.com/addClass/ reference for use of .addClass()
使用
.addClass()
http://api.jquery.com/addClass/参考
Someone may come along with pure JavaScript answer (no jQuery library use) if you prefer that approach. 如果您喜欢这种方法,可能会有纯JavaScript答案(不使用jQuery库)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.