Question

我有3个组件，我希望切换显示。

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

任何时间点只能显示一个#wrap。默认可以是任何#wrap。
一旦检测到鼠标悬停在category1中，将显示wrap1，并且将隐藏wrap2和wrap3。类别2，类别3相同。
然后鼠标可以离开category1但仍然会显示wrap1。类别2，类别3相同。
一旦检测到鼠标悬停在另一个类别中，相应的换行将接管并成为新的＆＃34;活跃的＆＃34;显示。
基本上，活动显示器已被激活＆＃34;将鼠标悬停在类别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/

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

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

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

通过jquery hover切换标签，添加删除类{display：none}

2 个答案: