javascript - 如何在单击导航栏 Bootstrap 时更改事件类的颜色

Question

我正在使用 bootstrap 导航栏并希望在点击事件类时更改颜色!我已经尝试过了!你能检查一下问题吗？

Javascript

<script>
    $('.navbar-nav li a').on("click", (function () {
        $('.navbar-nav').find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });
</script>

HTML

<nav class = "navbar navbar-inverse" role = "navigation">

    <div class = "navbar-header">
        <a class = "navbar-brand" href = "<?php echo(BASE_URL); ?>index.php">Computer Online Shop</a>
    </div>

    <div>
        <ul class = "nav navbar-nav">
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php">Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php?type=top">Top Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php?type=new">New Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/shopping_cart.php">Shopping Cart</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/check_out.php"> Check Out </a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>deals.php">Deals</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>contactus.php">Contact US</a></li>
        </ul>
    </div>

</nav>

这是此更改后的现有结果!

Answer 1

您需要为当前事件类指定样式。

<script>
        $('.navbar-nav li a').on("click", (function () {
            $('.navbar-nav').find(".active").removeClass("active");
            $(this).parent().addClass("active");
            // add this line to specify color of active class
            $(this).parent().find(".active").css("color","Your Chosen Color");
        });
    </script>