jquery获取meta content或当前位置的值，给当前栏目添加checked状态

本文链接：https://blog.youkuaiyun.com/qq_17475727/article/details/114030582

本文介绍了一段JavaScript代码，该代码通过读取网页元数据和当前显示的位置，自动为'行业新闻'栏目添加'checked'样式，当当前位置与栏目标题匹配时。这个功能提高了用户体验和网站导航的易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>判断mate或当前位置的值，给当前栏目添加checked状态</title>
	<meta name="ColumnName" content="行业新闻" />
	<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	<style>
	  *{padding: 0;margin: 0;}
	  body{padding: 50px;}
	  a{text-decoration: none;color: #333}
	  .news{margin-bottom: 20px;}
	  .lmlist{text-align: center;width: 200px; }
	  .lmlist h3{height: 48px;line-height: 48px;background: #2d66a5;color: #fff;}
	  .lmlist a{display: block;height: 36px;line-height: 36px;background:#f3f3f3;margin-bottom: 3px;}
	  .lmlist .checked{background:red;font-weight: bold;color: yellow;}
    </style></head>
<body>
    <div class="news">
     当前位置：首页 > <a href="#">新闻中心</a> > <span>媒体新闻</span>
    </div>
	<div class="lmlist">
		<h3>新闻中心</h3>
		<div class="zlmlist">
			<a href="#">最新资讯</a>
			<a href="#">媒体新闻</a>
			<a href="#">行业新闻</a>
		</div>
	</div>

	<script>
		$(document).ready(function () {
			// 获取mate content值
			var mtval = $('meta[name="ColumnName"]').attr("content");

            // 获取当前位置
			var wzval = $(".news span").text();
			
			// 遍历获取新闻中心的子栏目
			$(".zlmlist a").each(function(){
				var thval = $(this).text();
              
              // 获取meta标签的content值，判断当前栏目，添加checked
				// if(mtval == thval){

              // 当前位置,添加checked	
				if(wzval == thval){	
					$(this).addClass("checked");
				}

			})
		});
	</script>
</body>
</html>

在这里插入图片描述