选项卡切换问题

首页课程实战体系课手记专栏慕课教程

选项卡切换问题

来源：5-6 项目作业

慕斯_Irice368

2019-08-05 17:08:20

</div>

老师楼层中分类选项卡 $(".floor-title .tab")获取是虽然获取到了3个，但是当实际点击的时候索引是5个使用调试发现是因为.floor-title里面有5个子元素的原因（点击第二个选项卡，获取索引为2，第三个选项卡，获取索引为4），只能使用if判断方式来获取，方式写死了，如何准确获取到.tab和索引与div下面的3个ul 一一对应
$(" .tab").hover(function () {
var i = 1;
if ($(this).index() == 4) { i = 2 };
if ($(this).index() == 0) { i = 0 };
$(this).addClass("tab-active");
$(".floor-body>ul").eq($(this).index() - i).show().siblings().hide();
}, function () {
$(this).removeClass("tab-active");

作业中两个楼层我直接copy一楼层（标签完全相同，只是文字图片不同）
发现二楼的tab选项卡的背景hover有发生变化（多出箭头），但是floor-body发生变化的一楼的内容而非二楼中的（二楼floor-body毫无变化），出现相互影响的情况，只能再取其他class名称，写两个jquery代码（分楼层），不能共用一个吗

写回答

5回答

好帮手慕慕子

2019-08-06

已采纳

同学你好，老师结合你上一个问题的粘贴的部分代码测试了一下

首先，我们需要了解， $(this).index()是获取元素在当前同级元素中的索引值，然后在结合同学的代码给同学分析问题

先打印一下使用$('.floot-title .tab')获取的元素，包括一楼和二楼的选项卡，一共是六个哦

（1）$(this).index()获取的是类名为tab元素的在同级元素中的索引值
可以在鼠标移入的时候，打印一下index值查看一下
（2）分析原因后，我们来想解决方法。老师提供一个简单的思路
先第一楼层为例，给每个选项卡设置自定义属性data-index值
鼠标移入的时候，通过获取链接上的自定义属性值，显示对应的内容即可
因为使用jQuery选择器会选择页面上所有满足条件的元素，导致一层和二层的效果相互受到影响。
老师这里给同学提供一个简单的参考思路，可以将鼠标移入事件，封装成一个函数，然后传入不同的楼层名字，这样就不会发生冲突了, 另，需要主要，第二楼层的选项卡的a链接也需要在标签中设置data-index属性哦

综上，老师根据同学的这部分代码给出了一个参考的解决方案，由于不确定同学的项目中是否有其他代码会对这一块造成影响，如果无法解决同学的问题，可以再次提问，我们会继续为您解答的。

另，对于每一阶段的作业，我们可能无法从同学粘贴的部分代码中准确的找到问题所在，因为有时候代码出现问题，并不是代码所在行有问题，可能是其他行出现了错误造成这一段代码该实现的效果没有实现，为了更准确帮助同学解决问题，所以才会建议同学在作业写完了，将自己不明白的标注上，然后将项目打包压缩上传作业，批复作业的老师也会针对你的整体项目给出详细的解答的。

希望能帮助到了你，祝学习愉快，望采纳！