jquery页面跳转菜单高亮显示当前页面

最新推荐文章于 2021-05-25 13:39:16 发布

@一枝梅

最新推荐文章于 2021-05-25 13:39:16 发布

阅读量451

点赞数

原文链接：https://blog.csdn.net/qq_42786138/article/details/91039516

版权

效果图如下：
在这里插入图片描述
html代码：

<div class="navbar" role="navigation" id="nav">
					<ul class="nav navbar-nav" id="menu">
						<li>
							<a href="index.html" rel="index.html" >概况统计</a>
						</li>
						<li> 
							<a href="html/gateway_configurate.html" rel="html/gateway_configurate.html">网关配置</a>
						</li>
						<li>
							<a href="html/equip_configurate.html" rel="html/equip_configurate.html">设备配置</a>
						</li>
						<li>
							<a href="html/variable_configurate.html" rel="html/variable_configurate.html">变量配置</a>
						</li>
						<li>
							<a href="html/log_information.html" rel="html/log_information.html">日志信息</a>
						</li>
						
					</ul>
				</div>

css代码：

.getway .navbar .navbar-nav .active{
	background-color: rgba(230, 242, 255, 1);
	border-right: 3px solid rgba(0, 121, 254, 1);
	
}

js代码：

$(function() {
		var urlstr = location.href;　　
		var urlstatus = false;　　
		$('#menu li a').each(function() {　

			if((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href') != '') {
				$(this).addClass('active');
				urlstatus = true;
			} else {
				$(this).removeClass('active');
			}
		});
		if(!urlstatus) {
			$("#menu li a").eq(0).addClass('active');
		}
	})