明白楼主的意思了,你是想当点击后选中当前被点击的那个是吧举个栗子 <script> function showClick(obj) { for (var i = 1; i <=5; i++) { var id = $(obj).attr("id"); if (id == i) { $(obj).css("background", "red"); } else { $("#"+i).css("background", ""); }
var pn=location.search////////// var as=document.getElementById('nav').getElementsByTagName('a'); var match=false; for(var i=0;i<as.length;i++) if(as[i].href.indexOf(pn)!=-1){//连接包含当前页面名称则设置获得焦点 as[i].parentNode.className='focus'; match=true;//存在匹配 }else as[i].parentNode.className='';//去掉不配连接父节点的样式 if(!match)as[0].parentNode.className='focus';//没有匹配的则默认设置首页获取焦点 </script>
<script>
function showClick(obj) {
for (var i = 1; i <=5; i++) {
var id = $(obj).attr("id"); if (id == i) {
$(obj).css("background", "red");
} else {
$("#"+i).css("background", "");
}
}
} </script>
</head>
<body>
<ul>
<li onclick="showClick(this)" id="1">1111111</li>
<li onclick="showClick(this)" id="2">2222222</li>
<li onclick="showClick(this)" id="3">3333333</li>
<li onclick="showClick(this)" id="4">4444444</li>
<li onclick="showClick(this)" id="5">5555555</li>
</ul>
</body>
2.例子:
<ul class="nav">
<li class="home"><a href="/">首页</a></li>
<li class="f1"><a href="/">分类1</a></li>
<li class="f2"><a href="/">分类2</a></li>
<li class="f3"><a href="/">分类3</a></li>
<li class="f4"><a href="/">分类4</a></li>
</ul>我要 home,f1,f2,f3,f4 点击后背景不同背景在CSS定义
.focus a{color:#fff;background:#000}
</style>
<ul id="nav">
<li ><a href="/">首页</a></li>
<li ><a href="/class1.html">分类1</a></li>
<li ><a href="/class2.html">分类2</a></li>
<li><a href="/class3.html">分类3</a></li>
<li ><a href="/class4.html">分类4</a></li>
</ul>
<script>
///给导航的页面增加下面的js就行了var pn=/\/([^\.]+\.html)/.exec(location.path);//如果你的页面名称不一样,修改这个正则
if(pn)pn=pn[1];//匹配获取文件名
var as=document.getElementById('nav').getElementsByTagName('a');
var match=false;
for(var i=0;i<as.length;i++)
if(as[i].href.indexOf(pn)!=-1){//连接包含当前页面名称则设置获得焦点
as[i].parentNode.className='focus';
match=true;//存在匹配
}else as[i].parentNode.className='';//去掉不配连接父节点的样式
if(!match)as[0].parentNode.className='focus';//没有匹配的则默认设置首页获取焦点
</script>
例如;
<ul class="nav">
<li class="home"><a href="/">首页</a></li>
<li class="f1"><a href="/?tag=f1">分类1</a></li>
<li class="f2"><a href="/?tag=f2">分类2</a></li>
<li class="f3"><a href="/?tag=f3">分类3</a></li>
<li class="f4"><a href="/?tag=f4">分类4</a></li>
</ul>
.focus a{color:#fff;background:#000}
</style>
<ul class="nav">
<li class="home"><a href="/">首页</a></li>
<li class="f1"><a href="/?tag=f1">分类1</a></li>
<li class="f2"><a href="/?tag=f2">分类2</a></li>
<li class="f3"><a href="/?tag=f3">分类3</a></li>
<li class="f4"><a href="/?tag=f4">分类4</a></li>
</ul>
<script>
///给导航的页面增加下面的js就行了
var pn=location.search//////////
var as=document.getElementById('nav').getElementsByTagName('a');
var match=false;
for(var i=0;i<as.length;i++)
if(as[i].href.indexOf(pn)!=-1){//连接包含当前页面名称则设置获得焦点
as[i].parentNode.className='focus';
match=true;//存在匹配
}else as[i].parentNode.className='';//去掉不配连接父节点的样式
if(!match)as[0].parentNode.className='focus';//没有匹配的则默认设置首页获取焦点
</script>
.nav .focus .f1 a{color:#aaa;background:#111} f1 点击后的样式
.nav .focus .f2 a{color:#ccc;background:#222} f2 点击后的样式
.nav .focus .f3 a{color:#ddd;background:#333} f3 点击后的样式
.nav .focus .f4 a{color:#eee;background:#444} f4 点击后的样式
<div class="navigation">
<ul>
<li class="nav_home" onmouseover="g_topChn.showSubMenu();"><a href="/y/static/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>首页</span></a></li>
<li class="nav_lib" onmouseover="g_topChn.showSubMenu('sub_lib');"><a href="/y/static/singer/index/all_hot_1.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>乐库</span></a></li>
<li class="nav_mv" onmouseover="g_topChn.showSubMenu('sub_mv');"><a href="/y/static/mv/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>MV</span></a></li>
<li class="nav_mymusic" onmouseover="g_topChn.showSubMenu('sub_mymusic');"><a href="/y/static/mymusic/mymusic_index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>我的音乐</span></a></li>
<li class="nav_software" onmouseover="g_topChn.showSubMenu('sub_software');"><a href="/y/static/down/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>软件下载</span></a></li>
</ul>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.nav{
width: 406px;
height: 75px;
margin: 220px auto 0px;
padding:0px;
}
.nav li{
float: left;
width: 54px;
margin: 0px 27px 0px 0px;
padding:0px;
list-style-type: none;
}
.nav li a{
display: block;
text-decoration: none;
text-align: center;
padding: 50px 0px 10px 0px;
}
/* ===== 字体颜色 ===== */
.nav .home a{color: #990000;}
.nav .f1 a{color: #FF0000;}
.nav .f2 a{color: #0000FF;}
.nav .f3 a{color: #FF9966;}
.nav .f4 a{color: #9966FF;}
/* ===== 鼠标移上去的颜色 =====*/
.nav .home a:hover,.nav .home a.focus{/*--多增加一个焦点样式,和hover效果一样,下面的同理---*/
color: #FFFFFF;
background-color: #990000;
}
.nav .f1 a:hover,.nav .f1 a.focus{
color: #FFFFFF;
background-color: #FF0000;
}
.nav .f2 a:hover,.nav .f2 a.focus{
color: #FFFFFF;
background-color: #0000FF;
}
.nav .f3 a:hover,.nav .f3 a.focus{
color: #FFFFFF;
background-color: #FF9966;
}
.nav .f4 a:hover,.nav .f4 a.focus{
color: #FFFFFF;
background-color: #9966FF;
}
</style>
</head>
<body>
<ul class="nav" id="nav">
<li class="home"><a href="xx.html">首页</a></li>
<li class="f1"><a href="xx.html?tag=f1">分类1</a></li>
<li class="f2"><a href="xx.html?tag=f2">分类2</a></li>
<li class="f3"><a href="xx.html?tag=f3">分类3</a></li>
<li class="f4"><a href="xx.html?tag=f4">分类4</a></li>
</ul>
<script>
var search = location.search//////////
var as = document.getElementById('nav').getElementsByTagName('a');
if (search != '') {
for (var i = 0; i < as.length; i++)
if (as[i].href.indexOf(search) != -1) {//连接包含当前页面名称则设置获得焦点
as[i].className = 'focus'; break;
}
}
else as[0].className = 'focus'; //没有参数怎默认首页
</script>
</body>
</html>