我的 active类不在 <li> 之间切换我不确定为什么……这是我的代码片段:
.active {
background: #ef5b00;
color: #FFF;
}<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="master.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<!-- end sidebar header -->
<ul class="list-unstyled nav components">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
<li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
<li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
<li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
<li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
</ul>
<!-- end sidebar links -->
</nav>
<!-- end sidebar -->
<script type="text/javascript">
$(".nav li").click(function() {
if ($(".nav li").hasClass("active")) {
$(this).removeClass("active");
} else {
$(this).addClass("active");
}
});
</script>
</body>如您所见，点击的链接确实变成了灰色阴影，但是“橙色”active类不会被转移。
我假设我的 css是不正确的，因为我确实相信这是由 bootstarp 现在管理的，但是我不确定我做错了什么。
最佳答案
--> 请在你的客户js中加入以下js
$(document).ready(function(){
$('ul li').click(function(){
$('li').removeClass("active");
$(this).addClass("active");
});
});.sidebar ul .active {
background: #ef5b00;
color: #FFF;
}<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="master.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<!--end sidebar header-->
<ul class="list-unstyled nav components">
<li><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
<li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
<li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
<li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
<li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
</ul>
<!-- end sidebar links -->
</nav>
<!-- end sidebar -->
</div>
</body>关于jquery - 事件类不受 Bootstrap 管理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47391176/