切换标签通过jquery悬停,添加移除类{display:none}
Switch tabs by jquery hover, add remove class{display:none}
我有3个组件,我希望切换显示
我希望拥有的切换机制是:
- 在任何时间点只显示一个#wrap。默认值为#wrap。
- 一旦检测到鼠标悬停在category1中,将显示wrap1,隐藏wrap2和wrap3。类别2、类别3也一样。
- 鼠标可以离开category1,但wrap1仍将显示。类别2、类别3也一样。
- 一旦鼠标检测到鼠标悬停在另一个类别中,相应的wrap将接管并成为新的"活动"显示。
- 基本上,通过悬停在类别div上"激活"活动显示。
- 我已经提供了一个jsfiddle,代码可能太长,不能粘贴在这里。
现在javascript代码看起来很好,但它根本不工作。感谢任何帮助!
(function($) {
"use strict"; // Start of use strict
$("#catbox1").mouseenter( function () {
$("#wrap1").removeClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").addClass('hidden');
});
$("#catbox2").mouseenter( function () {
$("#wrap1").addClass('hidden');
$("#wrap2").removeClass('hidden');
$("#wrap3").addClass('hidden');
});
$("#catbox3").mouseenter( function () {
$("#wrap1").addClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").removeClass('hidden');
});
}(jQuery)); // End of use strict
小提琴更新:删除不必要的元素,添加更多的符号。
基本上似乎mouseenter功能不起作用,我不觉得类正在从包装中添加或删除,因为它们的显示总是ON。
https://jsfiddle.net/0rsph8s8/20/看,我已经过滤了你的代码,并展示了一种方法来显示/隐藏对应的点击元素
你只需要添加/删除类。
(function($) {
"use strict"; // Start of use strict
$("#catbox1").mouseenter(function() {
$("#wrap1").removeClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").addClass('hidden');
});
$("#catbox2").mouseenter(function() {
$("#wrap1").addClass('hidden');
$("#wrap2").removeClass('hidden');
$("#wrap3").addClass('hidden');
});
$("#catbox3").mouseenter(function() {
$("#wrap1").addClass('hidden');
$("#wrap2").addClass('hidden');
$("#wrap3").removeClass('hidden');
});
}(jQuery)); // End of use strict
.hidden
{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrap">
<div class="catbox" id="catbox1">
<div class="catboxInner">
<div class="catboxInnerText">Winding garden path</div>
</div>
</div>
<div class="catbox" id="catbox2">
<div class="catboxInner">
<div class="catboxInnerText">Winding garden path</div>
</div>
</div>
<div class="catbox" id="catbox3">
<div class="catboxInner">
<div class="catboxInnerText">Winding garden path</div>
</div>
</div>
</div>
<div class="wrap" id="wrap1">
wrap1
</div>
<!--end of wrap-->
<div class="wrap hidden" id="wrap2">
wrap2
</div>
<!--end of wrap-->
<div class="wrap hidden" id="wrap3">
wrap3
</div>
</body>
.show()
显示匹配的元素。
.hide()
隐藏匹配的元素
试试这个:
(function($) {
"use strict"; // Start of use strict
$("#catbox1").mouseenter(function() {
$("#wrap1").show();
$("#wrap2").hide();
$("#wrap3").hide();
});
$("#catbox2").mouseenter(function() {
$("#wrap1").hide();
$("#wrap2").show();
$("#wrap3").hide();
});
$("#catbox3").mouseenter(function() {
$("#wrap1").hide();
$("#wrap2").hide();
$("#wrap3").show();
});
}(jQuery)); // End of use strict
提琴链接:https://jsfiddle.net/0rsph8s8/10/
相关文章:
- 如何在使用jQuery应用display:none后正确显示元素
- Javascript -> CSS (display:none to display:block)
- 当display:none时,getElementById()无法获取元素
- Greasemonkey:当style=“display: none;”发生变化时如何做某事
- Pre 标记似乎忽略了样式属性(例如 display:none)
- override fadeout() display: none
- jQuery - display : none not working
- 在javascript中覆盖CSS样式“display:none”
- Javascript CSS Transitions to display:none 可以解决
- 通过jQuery将DISPLAY:NONE添加到span,当:鼠标单击span外部,或单击EXIT按钮,等等+
- slideDown() 在 css 设置为 display:none 时不起作用
- 设置 style.display= none 后优雅的 javascript 重新调整
- 如何使用属性 display:none 测量类的长度
- JS监视CSS属性的变化,如“display:none”=>“display:block”
- jQuery show element with display:none !important
- 如何将“display:none”与jquery或javascript一起使用
- 为什么javascript读取具有display:none的元素
- Javascript/Jquery alternative to "display:none"?
- 设置 style
- 标记时不显示.display = none
- element.style.display='none' 不起作用