文章内容
本文介绍jQuery如何根据当前页面url判断导航栏目项是否高亮，原理就是判断当前页面地址是否包含rel值得内容，如果包含就高亮显示该栏目.
完整代码
<!DOCTYPE html >
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
*
{
margin: 0;
padding: 0;
list-style-type: none;
box-sizing: border-box;
}
a
{
text-decoration: none;
}
#jqfree li
{
float: left;
padding: 0px 20px;
}
#jqfree li a
{
color: #333;
font-size: 16px;
line-height: 40px;
display: inline-block;
}
#jqfree li.cur
{
background: #ff0000;
}
#jqfree li.cur a
{
color: #fff;
}
</style>
</head>
<body>
<div id="jqfree">
<ul>
<li rel="index.html"><a href="index.html">首页</a></li>
<li rel="about.html"><a href="about.html">关于我们</a></li>
<li rel="pro.html"><a href="pro.html">产品中心</a></li>
<li rel="news.html"><a href="news.html">新闻资讯</a></li>
<li rel="map.html"><a href="map.html">销售网络</a></li>
<li rel="cobtact.html"><a href="contact.html">联系我们</a></li>
</ul>
</div>
<script>
$(function () {
var url = location.href;
//获取浏览器的url
var status = false; //标记
//遍历导航li
$("#jqfree li").each(function () {
//判断导航里面的rel和url地址是否相等
if ((url + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel') != '') {
$(this).addClass('cur');
status = true;
} else {
$(this).removeClass('cur');
}
});
//默认首页图标高亮
if (!status) { $("#jqfree li").eq(0).addClass('cur'); }
});
</script>
</body>
</html>
