Question

目前我尝试在选中后使所选列表项保持为粗体，并在选择其他项目后恢复正常。基本上我想要一个＆＃34;当前选中的标签＆＃34;。有没有办法用css做这个或者我需要Javascript吗？这是我的代码 - ＆gt;

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>

希望有一种简单的方法可以做到这一点。

Answer 1

使用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库）。

活动时的字体粗细 - CSS

1 个答案: