导航菜单点击切换时保持高亮选中状态（JS实现）示例

导航菜单点击切换时保持高亮状态（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()等。

ydyuse

发布了19 篇原创文章 · 获赞 6 · 访问量 1142

私信关注

导航菜单点击切换时保持高亮选中状态（JS实现）示例

猜你喜欢