Javascript 如何在单击导航栏引导时更改活动类的颜色

我正在使用引导导航栏，想在单击活动类时更改颜色！我试过了！你能检查一下这个问题吗

Javascript

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

$（'.navbar nav li a'）。在（“单击”上，（函数（）{
$（'.navbar-nav'）.find（“.active”）.removeClass（“active”）；
$（this.parent（）.addClass（“活动”）；
});

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>

以下是此更改的现有结果

html

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

您需要在每个页面上进行更改，只需在每个页面上应用“活动”类…加载哪个页面

或者使用jquery的其他想法

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

$（'.navbar nav li a'）。在（“单击”上，（函数（）{
$（'.navbar nav li'）.removeClass（“活动”）；
$（this.parent（）.addClass（“活动”）；
});

或

$（'.navbar nav li'）。在（“单击”、（函数（）{
$（'.navbar nav li'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});

您需要为当前活动类指定样式

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

$（'.navbar nav li a'）。在（“单击”上，（函数（）{
$（'.navbar-nav'）.find（“.active”）.removeClass（“active”）；
$（this.parent（）.addClass（“活动”）；
//添加此行以指定活动类的颜色
$（this.parent（）.find（“.active”）.css（“颜色”，“您选择的颜色”）；
});

请检查下面的代码`

$（“.navbar nav li a”）。单击（函数（）{
$（'.navbar-nav'）.find（“.active”）.removeClass（“active”）；
$（this.parent（）.addClass（“活动”）；
})；

add.active class in csscheck on header哪个页面是使用if condition apply active classi加载的？上面已经给出了代码！它不起作用。我已经尝试过你建议的codecheck在哪个元素上单击锚定标记上的event fire或li在你已经在li中添加了active class的地方，现在代码是这样运行的！我在.nav中添加了.active class我在jQuery中应用如下逻辑（1）选择。navbar nav li a（2）检查是否在navbar nav中有任何活动类，然后将其删除。（3）在单击标记的父级中应用活动类后。我已检查。不工作，因为在单击WebGeoKey后没有活动类，可能在单击时您的页面将被更改。对吗？

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