通过 jquery 悬停切换标签，添加删除 class{display:none}

Question

我有 3 个组件想要切换显示。

我想要的切换机制是：

任何时候都只显示一个#wrap。默认可以是任何#wrap.
一旦检测到鼠标悬停在category1中，wrap1会显示，wrap2和wrap3会隐藏。类别 2、类别 3 相同。
鼠标可以离开类别 1，但 wrap1 仍会显示。类别 2、类别 3 相同。
一旦检测到鼠标悬停在另一个类别中，相应的环绕将接管并成为新的 "active" 显示。
基本上活动显示是 "activated" 将鼠标悬停在类别 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功能似乎不起作用，我不觉得类被添加或从包装中删除，因为它们的显示总是打开的。

https://jsfiddle.net/0rsph8s8/20/

Answer 1

.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

Fiddle Link : https://jsfiddle.net/0rsph8s8/10/

Answer 2

看到我已经过滤了你的代码并展示了一种根据相应的点击元素显示/隐藏的方法。

您只需添加/删除 class。

(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 悬停切换标签，添加删除 class{display:none}

Switch tabs by jquery hover, add remove class{display:none}

javascript

css

jquery

class

display