怎么获取当前页面菜单高亮

Question

遇到个问题，想请教下大家：我有这么一个菜单项，当点击某个菜单项，就给这个菜单赋予一个“focus”的class值，该怎么实现呢？比如我点击荣誉这个菜单，就高亮显示。
<div class="menu">
<div class="head">关于我们</div>
<div class="body">
<ul>
<li><a href="about.html" class="i">简介</a></li>
<li><a href="honor.html" class="i">荣誉</a></li>
<li><a href="history.html" class="i">大事记</a></li>
<li><a href="contact.html" class="i">联系我们</a></li>
<li><a href="job.html" class="i">招贤纳才</a></li>
</ul>
</div>
</div>想用
<script type="text/javascript">$(document).ready(function(){
$(".menu ul li").eq(0).addClass("focus");
});
</script>
但eq(i)里的i怎么判断呢？

Answer 1

你给每一个菜单项加一个onclick事件，然后addClass("focus"); 试试

Answer 2

$(document).ready(function(){
$(".menu ul li").click(function(){
$(this).addClass('focus').siblings().removeClass('focus');
})
});试试

Answer 3

楼上的解答欠考虑一个问题，看看楼主的代码：<a href="about.html" class="i">是一个超链接，所以必须传递当前选中的索引到目标页面，才能判断给哪个 li 元素添加样式。
楼主的代码要改<script type="text/javascript">
getUrlParameters(name){
var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");
var r=window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]);
return null
}
$(document).ready(function(){
    var targetIndex=parseInt(getUrlParameters("viewid"));
    $(".menu ul li").eq(targetIndex).addClass("focus");
});
</script>
<div class="menu">
<div class="head">关于我们</div>
<div class="body">
<ul>
        <li><a href="about.html?viewid=0" class="i">简介</a></li>
        <li><a href="honor.html?viewid=1" class="i">荣誉</a></li>
        <li><a href="history.html?viewid=2" class="i">大事记</a></li>
        <li><a href="contact.html?viewid=3" class="i">联系我们</a></li>
        <li><a href="job.html?viewid=4" class="i">招贤纳才</a></li>
</ul>
</div>
</div>