我正在尝试使用 bootstrap 和jquery将类添加到单击的导航菜单li中。
当我点击菜单时,该类将按预期添加,但未添加相关的CSS属性-在特定情况下,颜色为红色-
您可以在下面找到一个非常简单的示例。
$(document).ready(function() {
$('#navlist a').click(function(e) {
e.preventDefault();
$('#navlist a').removeClass('active');
$(this).addClass('active');
});
});
.nav {
color: green;
}
.active {
color: red;
}
<ul class="list-unstyled" id="navlist">
<li id="home"><a class="nav" href="#">Home</a>
</li>
<li id="about"><a class="nav" href="#">About Us</a>
</li>
</ul>
fiddle
最佳答案
试试这个代码-
$(document).ready(function(){
$('#navlist a').click(function(e) {
e.preventDefault();
$('#navlist a').removeClass('active');
$('#navlist a').addClass('nav');
$(this).toggleClass('nav');
$(this).toggleClass('active');
});
});
和这个CSS-
a.nav:link { color: green; }
a.active:link { color: red; }
这是 fiddle -
https://jsfiddle.net/yLpn2nmb/3/