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（我也有点样式，所以我可以使用下划线示例）

你的html是一样的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我检查你的代码并添加了一些类。看一下这个。 DEMO here!

HTML：

 <div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar list-group">
    <li class="list-group-item active"><a href="#">Add </a></li>
    <li class="list-group-item"><a href="#">View/Modify</a></li>
    <li class="list-group-item"><a href="#">Delete</a></li>
  </ul>
</div>

CSS：

    li.list-group-item a:hover {
  background-color: transparent;
}

li.list-group-item.active a {
  color: #fff;
}

li.list-group-item.active a:hover {
  background-color: transparent;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
  background-color: #a8a8a8;
}

如何使侧栏有效？

2 个答案: