jquery怎么控制当前页的导航菜单效果?
发布网友
发布时间：2022-04-29 02:25
共1个回答
热心网友
时间：2022-04-21 12:01
<div
class="nav"><a
href="index.html">首页</a><a
href="proct.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>
