如何在單擊導航欄引導時更改Active類的顏色

Question

我正在使用引導導航欄，並想在單擊活動類時更改顏色！ 我已經嘗試了！ 你能檢查一下這個問題！

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

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>

要么

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

Answer 2

您需要為當前活動類指定樣式。

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

Answer 3

請檢查下面的代碼`

  $(".navbar-nav li a").click(function(){ $('.navbar-nav').find(".active").removeClass("active"); $(this).parent().addClass("active"); }); 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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><a href="#">Products</a></li> <li><a href="#">Top Products</a></li> <li><a href="#">New Products</a></li> <li><a href="#">Shopping Cart</a></li> <li><a href="#"> Check Out </a></li> <li><a href="#">Deals</a></li> <li><a href="#">Contact US</a></li> </ul> </div> </nav> 

`