html - 如何激活侧边栏？

Question

我有一个使用 Bootsrap CSS 的边栏，但是 class="active"不起作用。

此处，添加选项卡默认处于非事件状态。你能告诉我如何在使用 class="nav nav-sidebar"

时默认激活添加吗

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="#">Add </a></li>
    <li><a href="#">View/Modify</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

请在下面找到工作链接: enter link description here

Answer 1

您必须让它知道您希望它在激活后的外观。您需要一些 jquery 来为您进行主动交换。

所以我在这里添加了 jquery，我设置了 li.active 的样式(我也设置了 li 的样式，这样我就可以使用下划线示例了)

不过你的 html 是一样的。

$(".nav a").on("click", function() {
  $(".nav").find(".active").removeClass("active");
  $(this).parent().addClass("active");
});

.nav li {
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}
.nav li:hover {
  border-bottom: 3px solid #eee;
}
.nav li.active {
  border-bottom: 3px solid #338ecf;
  background: #eee
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="#">Add </a>
    </li>
    <li><a href="#">View/Modify</a>
    </li>
    <li><a href="#">Delete</a>
    </li>
  </ul>
</div>