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>

我尝试更改导航栏活动类的颜色onclick。但是它不能正常工作。

Answer 1

使用（请参见小提琴：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

这是工作示例：

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

.active和.nav-link之间应该有空格：

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

并更改行

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

到

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

为：

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

如果单击链接后页面刷新，则需要将其添加为：

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

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

3 个答案: