CODEWITHSUNDEEP
javascriptphpjquerycsstwitter-bootstrap
user5693432
user5693432

Reputation:

How to Change the Color of Active class on click Navigation Bar bootstrap

I am using bootstrap navigation bar and wanted to change the color on click active class! I have done try! can you check the issue!

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>

Here is existing result with this change!

Screenshot

Upvotes: 2

Views: 4059

Answers (3)

Parth Chavda
Parth Chavda

Reputation: 1829

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>

you need to change on every page just apply "active" class on each page...which page are loaded

or other idea using jquery

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

or

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

Upvotes: 1

GunvantParmar
GunvantParmar

Reputation: 143

Plz check below code`

        $(".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>

`

Upvotes: 1

Arun
Arun

Reputation: 146

U need to specify style for the current active class.

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

Upvotes: 1

Related Questions