通过jQuery悬停切换选项卡，添加删除类{display：none}
[英]Switch tabs by jquery hover, add remove class{display:none}
问题描述
我有3个要切换显示的组件。
我希望拥有的切换机制是：
- 在任何时间仅显示一个#wrap。 默认值可以是任何#wrap。
- 一旦在类别1中检测到鼠标悬停，wrap1将显示，wrap2和wrap3将被隐藏。 类别2，类别3相同。
- 鼠标然后可以离开category1，但wrap1仍将显示。 类别2，类别3相同。
- 一旦鼠标检测到悬停在另一个类别中，相应的换行将接管并成为新的“活动”显示。
- 基本上，通过将鼠标悬停在类别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函数无法正常工作，我不认为正在从包装中添加或删除类，因为它们的显示始终处于打开状态。
2 个解决方案
解决方案1
1 2016-09-25 06:56:20
.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/
解决方案2
1 已采纳 2016-09-25 08:03:47
请参阅我已经过滤了您的代码，并显示了一种根据相应的单击元素显示/隐藏的方法。
您只需要添加/删除类。
(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>
jQuery菜单，悬停并显示：无
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.