切换标签通过jquery悬停，添加移除类{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/

相关内容

最新更新

热门标签：