将导航栏项目设置为活动onclick

Question

我有很多问题，使导航栏项目在点击时激活。我已经将这个导航栏文件包含到了不同的页面中，但是当我单击一个项目时，它并没有改变它的类或样式。我尝试了许多技术，从使用jquery onclick函数在单击时添加活动类到更改css onclick，但都不起作用。任何可能的帮助都将不胜感激。导航条代码如下：

<div class="header" id="home">
    <div class="content white agile-info">
        <nav class="navbar navbar-default " role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                    <a class="navbar-brand" href="index.php">
                        <h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
                    </a>
                </div>
                <!--/.navbar-header-->
                <div class="nav navbar-nav  mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">

                    <nav class="link-effect-2" id="link-effect-2">
                        <ul class="nav navbar-nav navbar-right" >
                            <li class="active"><a href="index.php" class="effect-3">Home</a></li>
                            <li class="dropdown">
                                <a href="services.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Services <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="services.php">Services 2</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">Services 3</a></li>
                                    <li class="divider"></li>
                                    <li><a href="codes.php">Codes</a></li>
                                    <li class="divider"></li>
                                    <li><a href="icons.php">Icons</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">One more separated link</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="jobs.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Jobs<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-2">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="jobs.php">Walk-ins</a></li>
                                                <li><a href="jobs.php">Bpo Jobs</a></li>
                                                <li><a href="jobs.php">Teaching Jobs</a></li>
                                                <li><a href="jobs.php">Diploma Jobs</a></li>
                                                <li><a href="jobs.php">Tech Support</a></li>
                                                <li><a href="jobs.php">Finance Jobs</a></li>
                                                <li><a href="jobs.php">Part time Jobs</a></li>
                                                <li><a href="jobs.php">Health Care</a></li>
                                                <li><a href="jobs.php">Hospitality</a></li>
                                                <li><a href="jobs.php">Internships</a></li>
                                                <li><a href="jobs.php">Research Jobs</a></li>
                                                <li><a href="jobs.php">Defence Jobs</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="login.php">Recruiter Updates</a></li>
                                                <li><a href="upload.php">Upload Resume</a></li>
                                                <li><a href="codes.php">Shortcodes</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li><a href="events.php" class="effect-3">Events</a></li>

                            <li><a href="professional.php" class="effect-3">Professionals</a></li>
                            <li><a href="contact.php" class="effect-3">Contact</a></li>

                            <li  >
                              <a style="margin-top: -5%" href="login.php"> 
                                <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> 
                                     <i class="fa fa-user" aria-hidden="true"> </i>   Login</button></a></li>

                        </ul>


                    </nav>
                </div>
                <!--/.navbar-collapse-->
                <!--/.navbar-->
            </div>
        </nav>
    </div>
</div>

Answer 1

通常情况下，这应该使用JQuery来工作：

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

您还必须检查活动类正在更改的内容。

Answer 2

我想您的意思是，对于您单击的每个<li>项，都会在其类名列表中添加一个active类名。如果我的想法是正确的，这是我的建议：

HTML

<div class="header" id="home">
    <div class="content white agile-info">
        <nav class="navbar navbar-default " role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                    <a class="navbar-brand" href="index.php">
                        <h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
                    </a>
                </div>
                <!--/.navbar-header-->
                <div class="nav navbar-nav  mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">

                    <nav class="link-effect-2" id="link-effect-2">
                        <ul class="nav navbar-nav navbar-right main-ul" >
                            <li class="active"><a href="index.php" class="effect-3">Home</a></li>
                            <li class="dropdown">
                                <a href="services.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Services <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="services.php">Services 2</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">Services 3</a></li>
                                    <li class="divider"></li>
                                    <li><a href="codes.php">Codes</a></li>
                                    <li class="divider"></li>
                                    <li><a href="icons.php">Icons</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">One more separated link</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="jobs.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Jobs<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-2">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="jobs.php">Walk-ins</a></li>
                                                <li><a href="jobs.php">Bpo Jobs</a></li>
                                                <li><a href="jobs.php">Teaching Jobs</a></li>
                                                <li><a href="jobs.php">Diploma Jobs</a></li>
                                                <li><a href="jobs.php">Tech Support</a></li>
                                                <li><a href="jobs.php">Finance Jobs</a></li>
                                                <li><a href="jobs.php">Part time Jobs</a></li>
                                                <li><a href="jobs.php">Health Care</a></li>
                                                <li><a href="jobs.php">Hospitality</a></li>
                                                <li><a href="jobs.php">Internships</a></li>
                                                <li><a href="jobs.php">Research Jobs</a></li>
                                                <li><a href="jobs.php">Defence Jobs</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="login.php">Recruiter Updates</a></li>
                                                <li><a href="upload.php">Upload Resume</a></li>
                                                <li><a href="codes.php">Shortcodes</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li><a href="events.php" class="effect-3">Events</a></li>

                            <li><a href="professional.php" class="effect-3">Professionals</a></li>
                            <li><a href="contact.php" class="effect-3">Contact</a></li>

                            <li  ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i>   Login</button></a></li>

                        </ul>


                    </nav>
                </div>
                <!--/.navbar-collapse-->
                <!--/.navbar-->
            </div>
        </nav>
    </div>
</div>

CSS

.active {
  background: red;
}

JavaScript (JQuery)

$('.main-ul li').click(function(e) {
  e.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
})

我在第一个<ul>上添加了一个main-ul，这样我就可以很容易地引用它和它的<li>项，然后我在CSS中创建了.active。现在，无论何时单击<li>项，都会有一个红色背景应用于它，表明它具有active类名。