小白求助： 引入jQuery库之后，jQuery选项卡只显示第一个和最后一个，中间的选项不生效

[vipchao04]

引入jQuery库之后，jQuery选项卡只显示第一个和最后一个，中间的军事和体育不生效？

<ul class="aside-col01002-tab">
<li class="active"><a href="/list/yulexiuxian/xinwen/">新闻</a></li>
<li><a href="/list/diannaowangluo/junshi/">军事</a></li>
<li><a href="/list/yulexiuxian/tiyu/">体育</a></li>
<li><a href="/statics/turn/?a=1007&id=4">娱乐</a></li>
</ul>

<div class="aside-col01002-cont">
<div>内容11</div>
<div>内容22</div>
<div>内容33</div>
<div>内容44</div>
</div>

<script type="text/javascript">
jQuery(function(){
$(document).ready(function() {
$(".aside-col01002-tab li").mouseover(function() {
$(".aside-col01002-tab li").eq($(this).index()).addClass("active").siblings().removeClass('active');
$(".aside-col01002-cont div").hide().eq($(this).index()).show();
});
});
});
</script>

[JiexC0la]

代码没问题呀

[vipchao04]

引用 1 楼 JiexC0la 的回复:

代码没问题呀

解决了，是js多加载了一个多余的div标签，把多余的那个div改成span就好了，好神奇啊，哈哈

[天际的海浪]

你发的这部分代码没有问题，可能是css样式表的问题，你把css的代码发一下看看。

[天际的海浪]

另外 jQuery(function(){})和 $(document).ready(function() {}) 功能完全一样，用一个就行，不需要套两层

[天际的海浪]

这个要用子元素选择符 E > F 可以排除内容中的div

jQuery(function(){
    $(".aside-col01002-tab > li").mouseover(function() {
        $(".aside-col01002-tab > li").eq($(this).index()).addClass("active").siblings().removeClass('active');
        $(".aside-col01002-cont > div").hide().eq($(this).index()).show();
    });
});

[vipchao04]

引用 5 楼 天际的海浪的回复:

这个要用子元素选择符 E > F 可以排除内容中的div

jQuery(function(){
    $(".aside-col01002-tab > li").mouseover(function() {
        $(".aside-col01002-tab > li").eq($(this).index()).addClass("active").siblings().removeClass('active');
        $(".aside-col01002-cont > div").hide().eq($(this).index()).show();
    });
});

好的，谢谢大神