Question

我创建了一个简单的标签过滤器，但无法使其正常工作。当页面第一次重新加载时，我希望隐藏选项卡内容，并且希望在所有选项卡上显示“更多”，到目前为止，这是可行的。当您单击“更多”时，应显示选项卡内容，并且该当前选项卡的“更多”应被隐藏。我还需要切换选项卡，所以我再次单击选项卡时，它应该隐藏选项卡内容并显示“更多”。现在，我遇到的问题是，当您单击某个选项卡时，其他选项卡的选项卡内容会显示，但不会显示该选项卡的内容，除非您单击另一个选项卡，否则不会显示“更多”。谢谢！！

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
    
        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');
    
        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');
      
    
        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
      });
      
  });

.hideText{
  display: none;
}

.tab{
  cursor: pointer;
}
.iconsContainer{
    display: flex;
    justify-content: space-between;
}
.tab  p:first-of-type:hover{
  background: black;
}
.tab p:first-of-type{
  padding: 15px 30px;
  background: blue;
  color: white;
}
.current p:first-of-type{
  background: black !important;
}
.tripctychContent-container p{
  background: red;
  color: white;
}
p{
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="iconsContainer">
        <a class="tab" data-tabid="topic1">
          <div>
            <p>Topic 1 title</p>
            <p class="iconContainerMore">More</p>
          </div>
        </a>
        <a class="tab" data-tabid="topic2">
          <div>
            <p>Topic 2 title</p>
            <p class="iconContainerMore">More</p>
          </div>
        </a>
        <a class="tab" data-tabid="topic3">
          <div>
            <p>Topic 3 title</p>
            <p class="iconContainerMore">More</p>
          </div>
        </a>
      </div>
      
      <div class="tripctychContent-container">
        <div class="field--name-field-topic-1-content hideText" data-blockid="topic1">
          <p>Topic 1 body</p>
        </div>
        <div class="field--name-field-topic-2-content hideText" data-blockid="topic2">
          <p>Topic 2 body</p>
        </div>
        <div class="field--name-field-topic-3-content hideText" data-blockid="topic3">
          <p>Topic 3 body</p>
        </div>
      </div>

Answer 1

最后，您的JS函数发生了一些变化。

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
        alert(tabID);

        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');

        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');

        $('.field-class').hide()
        $("[data-blockid=" + tabID + "]").show();

      });      
  });

并为所有标签内容分配了一个通用类

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
    <a class="tab" data-tabid="topic1">
      <div>
        <p>Topic 1 title</p>
        <p class="iconContainerMore">More</p>
      </div>
    </a>
    <a class="tab" data-tabid="topic2">
      <div>
        <p>Topic 2 title</p>
        <p class="iconContainerMore">More</p>
      </div>
    </a>
    <a class="tab" data-tabid="topic3">
      <div>
        <p>Topic 3 title</p>
        <p class="iconContainerMore">More</p>
      </div>
    </a>
  </div>

  <div class="tripctychContent-container">
    <div class="field-class hideText" data-blockid="topic1">
      <p>Topic 1 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic2">
      <p>Topic 2 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic3">
      <p>Topic 3 body</p>
    </div>
  </div>

希望这会有所帮助！

Answer 2

如果您已经在使用removeClass，则无需显式toggleClass。

Answer 3

这里！

只需更新JS：

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
        //alert(tabID);
        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');

        //$('.tripctychContent-container').toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');
        $( ".tripctychContent-container>div").hide();
        $( ".tripctychContent-container>div[data-blockid=" + tabID + " ]" ).show();

        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
      });

  });

jQuery切换类无法正常运行

3 个答案: