Javascript 将导航栏项目设置为活动onclick
我在使导航栏项在单击时处于活动状态时遇到很多问题。 我已经将这个navbar文件包含在不同的页面中，但是当我点击一个项目时，它不会改变它的类或样式。 我尝试了很多技术，从使用jquery onclick函数添加单击时活动的类到更改css onclick，但都不起作用。任何可能的帮助都将不胜感激。导航条码如下：Javascript 将导航栏项目设置为活动onclick,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在使导航栏项在单击时处于活动状态时遇到很多问题。 我已经将这个navbar文件包含在不同的页面中，但是当我点击一个项目时，它不会改变它的类或样式。 我尝试了很多技术，从使用jquery onclick函数添加单击时活动的类到更改css onclick，但都不起作用。任何可能的帮助都将不胜感激。导航条码如下： <div class="header" id="home"> <div class="content white agile-info">
<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>
切换导航
-
-
-
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
您还必须检查活动类正在更改的内容。我认为您的意思是，对于您单击的每个
项，一个活动类名将添加到其类名列表中。如果我的想法是对的，我的建议是：
HTML
JavaScript（JQuery）
我在第一个
上添加了一个主ul
，这样我就可以很容易地引用它和它的项，然后我在CSS中创建了.active
。现在，每当你点击一个
项目时，一个红色背景就会被应用到它上面，表明它有一个活动的类名。请添加你的JS
，即使它不工作，这样我们就可以看到问题所在；您是否按照说明包含了您的js
文件？抱歉，我刚刚删除了以前不起作用的脚本。是的，我已经包含了，其他脚本正在正常工作。我添加的e.preventDefault（）
阻止了链接的工作；把它拿走。我之所以添加它，是因为当我在你的代码中做实验时，我不想重定向
<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>
.active {
background: red;
}
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})