Question

我已经做了一些jquery来隐藏和显示div，具体取决于用户点击的标签。它适用于除第一个之外的所有其他3个选项卡。我没有线索。当没有活动的类时，它似乎没有隐藏它 - 当我检查时，没有活动的类，所以一个傻眼。

Jquery的：

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e)  {
  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
      if($('ul.tab-links li.tab1').hasClass('active')){
      $(".tab-content").css({ 'background-color': '#cbd7d7' });
      $(".arrow").css({ 'border-color': '#cbd7d7' });
      $(".arrow").css({ 'transform': 'translateY(560px)' });
      $(".tab-content .tab .image-tab1").css({ 'transform': 'translateX(0)' });
      $(".tabs .tab-content #tab1.tab").show();
      }
      else {
        $(".tab-content .tab .image-tab1").css({ 'transform': 'translateX(1600px)' });
        $(".tabs .tab-content #tab1.tab").hide();
      }
      if($('ul.tab-links li.tab2').hasClass('active')){
        $(".tab-content").css({ 'background-color': '#ebebeb' });
        $(".arrow").css({ 'border-color': '#ebebeb' });
        $(".arrow").css({ 'transform': 'translateY(600px)' });
        $(".tab-content .tab .image-tab2-identity").css({ 'transform': 'translateY(0)' });
        $(".tabs .tab-content #tab2.tab").show();
        }
        else {
          $(".tab-content .tab .image-tab2-identity").css({ 'transform': 'translateY(-3000px)' });
          $(".tabs .tab-content #tab2.tab").hide();
        }
      if($('ul.tab-links li.tab3').hasClass('active')){
        $(".tab-content").css({ 'background-color': '#d5cebc' });
        $(".arrow").css({ 'border-color': '#d5cebc' });
        $(".arrow").css({ 'transform': 'translateY(650px)' });
        $(".tab-content .tab .image-tab3-touch1").css({ 'transform': 'translateY(0)' });
        $(".tab-content .tab .image-tab3-touch2").css({ 'transform': 'translateY(0)' });
        $(".tabs .tab-content #tab3.tab").show();
        }
        else {
          $(".tab-content .tab .image-tab3-touch1").css({ 'transform': 'translateY(-1300px)' });
          $(".tab-content .tab .image-tab3-touch2").css({ 'transform': 'translateY(1300px)' });
          $(".tabs .tab-content #tab3.tab").hide();
        }
      if($('ul.tab-links li.tab4').hasClass('active')){
        $(".tab-content").css({ 'background-color': '#eaeae2' });
        $(".arrow").css({ 'border-color': '#eaeae2' });
        $(".arrow").css({ 'transform': 'translateY(680px)' });
        $(".tab-content .tab .image-tab4").css({ 'transform': 'translateY(0)' });
        $(".tabs .tab-content #tab4.tab").show();
        }
        else {
          $(".tab-content .tab .image-tab4").css({ 'transform': 'translateY(1300px)' });
          $(".tabs .tab-content #tab4.tab").hide();
        }
      e.preventDefault();
      e.stopImmediatePropagation();
  });
});

HTML：

<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab">
<div class="image-tab1">
</div>
</div>
<div id="tab2" class="tab" >
<div class="image-tab2-identity">
</div>
</div>
<div id="tab3" class="tab">
<div class="image-tab3-touch1">
</div>
<div class="image-tab3-touch2">
</div>
</div>
<div id="tab4" class="tab">
<div class="image-tab4">
</div>
</div>
</div>
<div class="arrow"></div>
<ul class="tab-links">
<li class="tab1 active"><a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
<p id="more-info">paragraph.</p></li>
<li class="tab2"><a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
<p id="more-info">paragraph.</p></li>
<li class="tab3"><a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
<p id="more-info">paragraph.</p></li>
<li class="tab4"><a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
<p id="more-info">paragraph.</p></li>
</ul>
</div>

更新：

感谢您的评论 - 在阅读建议后，我设法解决了这个问题，但只是添加了

$(".tabs .tab-content div").removeClass("active");

在每个if语句下，以便它首先从all中删除活动类，然后将其添加到相应的一个。

感谢您的帮助：D

Answer 1

如果我理解你的问题是正确的。这是你的HTML。

<div class="tabs">
<div class="tab-content">
    <div id="tab1" class="tab">
        <div class="image-tab1"></div>
    </div>
    <div id="tab2" class="tab" >
        <div class="image-tab2-identity"></div>
    </div>
    <div id="tab3" class="tab">
        <div class="image-tab3-touch1"></div>
        <div class="image-tab3-touch2"></div>
    </div>
    <div id="tab4" class="tab">
        <div class="image-tab4"></div>
    </div>
</div>
<div class="arrow"></div>
<ul class="tab-links">
    <li class="tab1 active">
        <a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
        <p id="more-info">paragraph.</p>
    </li>
    <li class="tab2">
        <a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
        <p id="more-info">paragraph.</p>
    </li>
    <li class="tab3">
        <a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
        <p id="more-info">paragraph.</p>
    </li>
    <li class="tab4">
        <a id="tablink" class="activetabcheck" href="#tab1">HEADING</a>
        <p id="more-info">paragraph.</p>
    </li>
</ul>

点击tab-link，您想要添加课程active。

CSS

.active
{
  //all your style stuff
}

的jQuery

$(document).ready(function(e)
{
 $("ul.tab-links li").on("click",function(e)
 {
  //get the index of li clicked.
  var index = $(this).eq();
  //remove actve class 
  $("div.tab-content").find("div.tab .active").each(function()$(this).removeClass("active")});

  //add class ative
  $("div.tab-content div").eq(index).addClass("active");
});

// Use this link to get more readable snippert - https://codepaste.net/cwiaad

希望这有帮助。

Jquery隐藏/显示不仅仅在一个div上

1 个答案: