<!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;
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);
if (http.indexOf(liValue) >= 0) {
$(".nav ul li").removeClass("select");
$(".nav ul li").eq(index).addClass("select");
}
$(this).click(function () {
$(".nav ul li").removeClass("select");
$(".nav ul li").eq(index).addClass("select");
});
});
});
</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>
网上的都是不能用的，我又修改了一下，可以用的
相关推荐
"jQuery顶部定位导航 jQuery滚动顶部定位导航网页特效.zip" 文件包含了一个利用jQuery实现的智能顶部导航栏，该导航栏在用户滚动网页时能够保持在屏幕顶部，提供持续的导航功能，同时具有动态效果，提升用户体验。...
智能截取会主动判断每一个字符是全角或半角，会整体计算每一个标题的理想长度来进行截取。 21.可以发布强制URL跳转的文章。 22.★可以迅速在前后台自由关闭文章的调查（点赞、投票）及评论功能。 23.每篇文章发布...
Beetl,是Bee Template Language的缩写，它绝不是简单的另外一种模板引擎，而是新一代的模板引擎，它功能强大，性能良好，秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
响应式设计是当前网页设计的重要趋势，它的核心在于使用灵活的布局、媒体查询和流式网格，确保网站在手机、平板电脑和桌面电脑等不同设备上都能呈现出良好的视觉效果和功能体验。 1. **响应式设计**：响应式设计...
-为TabStrip增加EnableTabCloseMenu属性，是否启用右键菜单，可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性，用来控制小数点后的位数（需要设置NoDecimal="false"）(feedback:zqmars)。...
-为TabStrip增加EnableTabCloseMenu属性，是否启用右键菜单，可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性，用来控制小数点后的位数（需要设置NoDecimal="false"）(feedback:zqmars)。...