通过jquery hover切换标签，添加remove class{display:none}答案

【问题标题】：Switch tabs by jquery hover, add remove class{display:none}通过jquery hover切换标签，添加remove class{display:none}
【发布时间】：2017-02-02 16:31:39
【问题描述】：

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

我希望拥有的切换机制是：

在任何时间点都只显示一个#wrap。默认可以是任何#wrap。
一旦检测到鼠标悬停在 category1 中，将显示 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 功能似乎不起作用，我不觉得类被添加或从包装中删除，因为它们的显示始终处于打开状态。

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

【问题讨论】：

我认为问题出在我的 css 上，我还没有提出 css 来引用 '#wrap1 .hidden'。
你想默认显示换行吗？
@Loading.. 我希望默认显示第一个包装。感谢您的提问！
你知道你的 CSS .boxInner:hover .titleBox { margin-bottom: 0; } 到现在为止都在做吗？到目前为止，您的 jquery 在您的代码中还没有发挥任何作用。
按您的意思做所有事情？是的。我更新了小提琴。让您更轻松地测试它。

标签： javascript jquery css class display

【解决方案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

小提琴链接：https://jsfiddle.net/0rsph8s8/10/

【讨论】：

@Md.KhairulHasan 谢谢这工作！只需要编写额外的 css 行以确保在刷新时不会显示所有 3 个包装。请参阅下面的加载答案。谢谢！

【解决方案2】：

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

您只需要添加/删除类。

(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>

【讨论】：

@iWillGetBetter 没问题，亲爱的，很高兴看到它终于为你工作了 :)