jq 导航栏点击添加/删除类(a标签跳转页面)

<div class="container-fluid" style="background-color: #1DA7FF">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="{:url('index/index/index')}"><img src="__CDN__/assets/imgs/logo2.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars text-light"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ml-auto pr-5" id="nav">
<li class="nav-item position-relative bar">
<a class="nav-link text-light" href="{:url('index/index/index')}">
<span>首页</span>
</a>
</li>
<li class="nav-item position-relative l-hoverbottom">
<a class="nav-link text-light" href="{:url('index/index/gongneng')}">
<div class="l-d position-absolute"><i
class="icon fas fa-pencil-alt position-absolute l-i"></i></div>
<span>功能</span>
</a>
</li>


<li class="nav-item position-relative l-hoverbottom">
<a class="nav-link text-light" href="{:url('index/index/customercase')}" tabindex="-1" aria-disabled="true">
<div class="l-d position-absolute"><i class="icon fas fa-pencil-alt position-absolute l-i"></i></div>
<span>客户案例</span>
</a>
</li>



</ul>
<form class="form-inline my-2 my-lg-0">
<button
class="btn btn-outline-success btn-sm my-2 my-sm-0 mr-2 mr-sm-2 bg-success text-light border-o"
type="submit"><a href="{:url('index/login/login')}">登录</a>
</button>
<button
class="btn btn-outline-success btn-sm my-2 my-sm-0 bg-primary text-light border-0"
type="submit"><a href="{:url('index/login/register')}">注册</a>
</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</div>





<script type="text/javascript">
$('#navbarSupportedContent .nav-item').click(function(){
$(this).addClass('nav-active').siblings('.nav-item').removeClass('nav-active');
});

//通过地址把菜单栏变色
$(function(){
var href=window.location.href;
var lastHref=href.substring(href.lastIndexOf('/')+1);
$('#navbarSupportedContent .nav-item').each(function(i){
var hrefNav=$('a',this).attr('href');
var lastHrefNav=hrefNav.substring(hrefNav.lastIndexOf('/')+1);
if(lastHref==lastHrefNav){
$(this).addClass('nav-active');
}
});
});

</script>
原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/14178495.html