发表时间：2012-11-05
最后修改：2013-01-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery智能判断是否是当前导航并加标记</title>
<script src="http://www.webdm.cn/themes/script/jquery.js" type="text/javascript"></script>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd
{
padding: 0;
margin: 0;
}
li
{
list-style: none;
}
img
{
border: none;
}
em
{
font-style: normal;
}
a
{
color: #555;
text-decoration: none;
outline: none;
blr: this.onFocus=this.blur();
}
a:hover
{
color: #000;
text-decoration: underline;
}
body
{
font-size: 12px;
font-family: Arial,Verdana, Helvetica, sans-serif;
word-break: break-all;
word-wrap: break-word;
}
.clear
{
height: 0;
overflow: hidden;
clear: both;
}
.nav
{
width: 950px;
height: 29px;
margin: 20px auto 0;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -180px;
position: relative;
}
.navl
{
position: absolute;
left: 0;
width: 3px;
height: 29px;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat 0 -150px;
}
.navr
{
position: absolute;
right: 0;
width: 3px;
height: 29px;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -150px;
}
.nav ul
{
margin-left: 10px;
}
.nav ul li
{
float: left;
line-height: 29px;
display: inline;
text-align: center;
padding-left: 5px;
font-size: 14px;
font-weight: bold;
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -208px;
}
.nav ul li a
{
float: left;
color: #FFF;
padding: 0 10px;
}
.nav ul li.select
{
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -240px;
position: relative;
margin-top: -4px;
}
.nav ul li.select a
{
background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x right -240px;
height: 33px;
line-height: 33px;
color: #333;
text-indent: -3px;
}
</style>
<script type="text/javascript">
// nav
$(function shownav() {
var a1 = window.location.href;//当前url地址
var a2 = $(".nav ul li");//菜单的项
var strs = new Array();
strs = a1.split("/");
for (var i = 0; i < a2.length; i++) {
if ($(a2[i]).children().attr("href") == strs[(strs.length) - 1]) {//菜单项的地址是否等于当前链接
$(a2[i]).addClass("select");
return;
}
}
})
//又一种方法
$(document).ready(function () {
$(".nav ul li").each(function (index) {
var strs = new Array();
strs = window.location.href.split("/");
var http = strs[(strs.length) - 1];//获取最后一个“/”的地址
var liValue = $(".nav ul li").eq(index).children().attr("href").substr(0, 4);//获取菜单项链接的前4个字符
if (http.indexOf(liValue) >= 0) {//用包含比较是否相同
$(".nav ul li").removeClass("menu_dq");
$(".nav ul li").eq(index).addClass("menu_dq");
}
$(this).click(function () {
$(".nav ul li").removeClass("menu_dq");
$(".nav ul li").eq(index).addClass("menu_dq");
});
});
});
</script>
</head>
<body>
<div class="nav">
<em class="navl"></em><em class="navr"></em>
<ul>
<li><a href="nav.html">首 页</a></li>
<li><a href="nav2.html">手机卖场</a></li>
<li><a href="nav3.html">数码天下</a></li>
<li><a href="nav4.html">时尚女人</a></li>
<li><a href="nav5.html">家居装饰</a></li>
</ul>
</div>
<br />
</body>
</html>
其他几个页面都是一样的，就不上传了。。。
网上的都是不能用的，我又修改了一下，可以用的
