Question

jquery怎么控制当前页的导航菜单效果？

用jquery怎么控制当前页对应的导航菜单效果？

Answer 1

例如导航的div <div class="nav"><a href="index.html">首页</a><a href="product.html">产品</a><a href="case.html">案例中心</a></div>

下面的html内容：
<div class="main">
<div class="content">首页的内容</div>
<div class="content">产品的内容</div>
<div class="content">案例中心的内容</div>
</div>
至于class=“content”可以是你自己加上的为了便于jQuery获取，没有这个样式类
<script type="text/javascript">
$(document).ready(function()
{
var tabs = $('.nav > a');
var cons = $('.main > div.content');

tabs.first().addClass("now").show(); //默认第一个显示
cons.first().show().nextAll().hide(); //默认第一个显示，其他隐藏
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});

});
</script>

Answer 2

你都不给个代码看看，谁知道啊！
两种简单方式：
1.导航和内容绑定起来，例如：首页和首页内容加class="main"
2.利用index取得导航的index，然后根据index查找相应内容
例如：导航为class='div1'，内容为class='div2'，则$("div1").mouseover(function(){
$("div2 :eq($("div1").index(this)).show();//同时，将其他的hide()掉});
其实最简单的是用插件
例如jquery-ui