导航菜单点击切换时保持高亮状态(JS实现)示例
尝试每个页面的导航栏目后加class=“active”属性进行修改不成功,这时就需要灵活使用javascript来搞定。
实现效果如图 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单切换高亮选择项1</title>
</head>
<body>
<style>
.redtd{
background-color:#FFC926; font-weight:bold;
}
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
$('td').click(function(){
$(this).toggleClass('redtd').siblings().removeClass('redtd');
});
});
//默认点亮第一个
$('#tsel1 td:eq(1)').toggleClass('redtd');
</script>
<div>
<table id="tsel1" style="margin-top: 8px;">
<tr height="35">
<td style="width:119px;"><a >参数信息导航</a></td>
<td style="width:120px;"
bgcolor="#E5E5E5" onMouseOut="javascript:this.bgColor='#E5E5E5';"
onMouseMove="javascript:this.bgColor='#FFC926';" >
<a href="#">参数导航一</a>
</td>
<td style="width:120px;"
bgcolor="#E5E5E5" onMouseOut="javascript:this.bgColor='#E5E5E5';"
onMouseMove="javascript:this.bgColor='#FFC926';" >
<a href="#">参数导航二</a>
</td>
<td style="width:5px;"></td>
<td style="width:120px;" class="center"
bgcolor="#E5E5E5" onMouseOut="javascript:this.bgColor='#E5E5E5';"
onMouseMove="javascript:this.bgColor='#FFC926';" >
<a href="#">参数导航三</a>
</td>
<td style="width:5px;"></td>
<td style="width:120px;" class="center"
bgcolor="#E5E5E5" onMouseOut="javascript:this.bgColor='#E5E5E5';"
onMouseMove="javascript:this.bgColor='#FFC926';" >
<a href="#">参数导航四</a>
</td>
<td style="width:5px;"></td>
</tr>
</table>
</div>
</body>
</html>
另外一种实现方式,效果如图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单切换高亮选择项</title>
</head>
<body>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cursel{ background:#D96C00; font-weight:bold;}
</style>
<ul class="menu" id="menu">
<li><a href="demo1.html?id=0">首页</a></li>
<li><a href="demo1.html?id=1">导航一</a></li>
<li><a href="demo1.html?id=2">导航二</a></li>
<li><a href="demo1.html?id=3">导航三</a></li>
<li><a href="demo1.html?id=4">导航四</a></li>
</ul>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var urlstr = location.href;
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
$(this).addClass('cursel'); urlstatus = true;
} else {
$(this).removeClass('cursel');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cursel'); }
</script>
</body>
</html>
代码可以直接拷贝测试,原理尽在代码中,主要用到添加类样式addClass(),删除类样式removeClass(),切换类样式toggleClass()等。