Bootstrap 4.1导航栏活动类的颜色不变

Question

 $('.navbar-nav .nav-item').click(function(){ $('.navbar-nav .nav-item').removeClass('active'); $(this).addClass('active'); }) 

 .navbar-light .navbar-nav .active>.nav-link { color:red; } 

 <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav w-100 nav-justified"> <li class="nav-item active"> <a class="nav-link" href="<?php echo base_url('home'); ?>">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page1'); ?>">Page One</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page2'); ?>">Page Two</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page3'); ?>">Page Three</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page4'); ?>">Page Four</a> </li> </ul> </div> </div> </nav> 

I have tried to change my navbar active class color onclick. But it doesn't work properly.

Answer 1

Use (see fiddle: https://jsfiddle.net/so8e5pug/7/ ):

.navbar-light .navbar-nav .active>.nav-link{
    color:red!important;
}

 $('.navbar-nav .nav-item').click(function(){ $('.navbar-nav .nav-item.active').removeClass('active'); $(this).addClass('active'); }) 

 .navbar-light .navbar-nav .active>.nav-link{ color:red!important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-sm navbar-light"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav w-100 nav-justified"> <li class="nav-item active"> <a class="nav-link" href="<?php echo base_url('home'); ?>">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page1'); ?>">Page One</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page2'); ?>">Page Two</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page3'); ?>">Page Three</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url('home/page4'); ?>">Page Four</a> </li> </ul> </div> </div> </nav> 

Answer 2

here is the working demo :

 $(document).ready(function(){ $('.navbar-nav .nav-item').click(function(){ $('.navbar-nav .nav-item').removeClass('active'); $(this).addClass('active'); }) }); 

 .navbar-nav>li.nav-item.active>a.nav-link{ text-decoration:none; color:red; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav w-100 nav-justified"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page Two</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page Three</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page Four</a> </li> </ul> </div> </div> </nav> 

Answer 3

There should be space between .active and .nav-link as:

.navbar-light .navbar-nav .active > .nav-link {
    color:red;
}

and change line

$('.navbar-nav .nav-item').removeClass('active');

to

$('.navbar-nav .nav-item.active').removeClass('active');

as:

$('.navbar-nav .nav-item').click(function(){
    $('.navbar-nav .nav-item.active').removeClass('active');
    $(this).addClass('active');
})

If your page is refreshing after clicking on the link then you need to add it as:

// Get current page URL
var url = window.location.href;

// remove # from URL
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

// remove parameters from URL
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

// select file name
url = url.substr(url.lastIndexOf("/") + 1);
// Loop all menu items
$('.navbar-nav li').each(function(){
    // select href
    var href = $(this).find('a').attr('href');

    // Check filename
    if(url == href){

        // Add active class
        $(this).addClass('active');
    }
});

Reference