我在使导航栏项目在点击时处于活动状态时遇到很多麻烦。 我已将此导航栏文件包含到其他页面，但是当我单击某个项目时，它不会更改其类或样式。 我已经尝试了许多技术，从使用jquery onclick函数添加活动的click类到更改更改的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>
答案 0 :(得分：0)
通常这应该使用JQuery进行工作：
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
您还必须检查活动班级正在发生什么变化。
答案 1 :(得分：0)
我认为您的意思是对于您单击的每个<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');
})
我在第一个main-ul上添加了一个<ul>，因此我可以轻松地引用它及其<li>项，然后在CSS中创建了.active。现在，每当您单击<li>项时，都会在其上应用红色背景，指示其具有active类名。