我有 3 个组件想要切换显示。
我希望拥有的切换机制是:
- 任何时候都只显示一个#wrap。默认值可以是任何#wrap。
- 一旦检测到鼠标悬停在类别 1 中，wrap1 将显示，wrap2 和 wrap3 将隐藏。类别 2、类别 3 相同。
- 然后鼠标可以离开类别 1，但 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
fiddle 更新: 删除了不必要的元素并添加了更多符号。
基本上似乎 mouseenter 函数不起作用，我不觉得类被添加或从包装中删除，因为它们的显示总是打开。
最佳答案
看到我已经过滤了您的代码并展示了一种根据相应的点击元素显示/隐藏的方法。
你只需要添加/删除类。
(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>关于javascript - 通过jquery悬停切换标签，添加删除类{显示:none}，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39684057/