javascript - 单击时如何在 Bootstrap 中分别为导航的白色和黑色添加背景和文本颜色？

Question

我有一个显示导航的代码。当我点击它时，背景颜色变为白色，但文本颜色没有变为黑色。

这是源代码:

<div class="bs-example" style="padding:27px;">
    <ul  class="nav nav-tabs" style="border-bottom-style: hidden;" id="navv">
        <li><a  href="#/Home"><span class="glyphicon glyphicon-home ">Home</span></a></li>
        <li><a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a></li>
        <li><a href="#/View">View Form</a></li>
    </ul>
</div>

jQuery:

$(document).ready(function(){
    $('.bs-example #navv li a').click(function(e) {
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        e.preventDefault();
    }); 
});

CSS:

#navv .active > a {
    color:#F95700;
}

我已经像上面那样尝试过了，但文本仍然没有变黑。

Answer 1

改变你的 CSS

#navv > a.active{
    color:#F95700;
}

或者像这样的脚本:

$(document).ready(function(){
    $(document).on('click','.bs-example #navv li a',function(e) {
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
            $this.css('color','#000')
        }
        e.preventDefault();
    }); 
});