对于上述问题,我已经完成了使用jQuery的codebins的解决方案。
DEMO:http://codebins.com/bin/4ldqpa4
在这里,我所提到的步骤,上述溶液中执行。
1)在标题标签中包含最新的jQuery.js和querystring-0.9.0.js javascript文件。
2)HTML
<div id="panel">
<ul class="menu">
<li>
<a href="#?page=0">
Index
</a>
</li>
<li>
<a href="#?page=1">
About
</a>
</li>
<li>
<a href="#?page=2">
Test
</a>
<li>
</ul>
</div>
3)CSS
ul.menu{
border:1px solid #112266;
background:#ccc;
}
ul.menu li{
list-style:none;
display:inline-block;
margin-left:10px;
padding:0px;
width:60px;
text-align:center;
}
ul.menu li:hover{
background:#343434;
}
ul.menu li a{
padding:0px;
color:#113399;
text-decoration:none;
}
ul.menu li:hover a{
color:#c6b744;
text-decoration:underline;
}
ul.menu li.active{
background:#343434;
}
ul.menu li.active a{
color:#c6b744
}
4)的jQuery:
$(function() {
$(".menu li").click(function() {
setTimeout(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
}, 200);
});
});
在上述方案中,我必须设置像#的href链接?页=因为箱来运行新的页面重定向Java脚本是不可能的垃圾箱以及我必须使用setTimeout函数,因为当前页面不是重定向只是#更改同一页上的查询字符串?页=。
如果你想在你的项目,然后把上面的jQuery脚本共同的地方,以便在将执行每个菜单链接,并设置与活动类当前页面的链接使用上面的解决方案。
注意:删除setTimeout函数包装只是不停地有代码行脚本里面。它看起来像如下:
$(function() {
$(".menu li").click(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
});
});
你为什么要这么做?好像你是复杂 – 2012-07-20 12:49:29
是的,你可以添加类使用JavaScript,但不会是更容易产生对服务器端的一些问题? – Leri 2012-07-20 12:49:52
根据你需要什么类的我会按照@PLB的建议添加与PHP服务器端的类。 – 2012-07-20 12:51:03