演示

Question

因此，我尝试创建一组选项卡，但是，当我移动选项卡时，其内容不会被隐藏。

这是我的代码

HTML

<section class="product-features">
    <section class="container">
      <section class="feature-tabs" data-tabgroup="productFeatureTabs">
        <li><a href="#InnovativeStorytelling" class="active">Innovative Storytelling</a></li>
        <li><a href="#ImmediateEmotionalFeedback">Immediate Emotional Feedback</a></li>
        <li><a href="#ExpandingDigitalLibrary">Expanding Digital Library</a></li>
      </section>

      <section class="tab-content" id="productFeatureTabs">
        <!-- start Innovative Storytelling -->
        <section id="InnovativeStorytelling" class="tab-panel">
          <section class="image">
            <img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
          </section>

          <section class="content">
            <img src="./images/read.svg" alt="Book">
            <h1>Innovative Storytelling</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Innovative Storytelling -->

        <!-- start Immediate Emotional Feedback -->
        <section id="ImmediateEmotionalFeedback" class="tab-panel">
          <section class="image">
            <img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
          </section>

          <section class="content">
            <img src="./images/emotion.svg" alt="Emotions">
            <h1>Immediate Emotional Feedback</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Immediate Emotional Feedback-->

        <!-- start Expanding Digital Library -->
        <section id="ExpandingDigitalLibrary" class="tab-panel">
          <section class="image">
            <img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
          </section>

          <section class="content">
            <img src="./images/idea.svg" alt="Light Bulb">
            <h1>Expanding Digital Library</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Expanding Digital Library-->
      </section>
    </section>
  </section>

JS

$(document).ready(function() {
  $('.tab-content > .tab-panel').hide();
  $('.tab-content > .tab-panel:first-of-type').show();

  $('.feature-tabs a').click(function(e) {
    e.preventDefault();

    var $this = $(this),
        tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
        link = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');

    link.removeClass('active');
    $this.addClass('active');
    $(tabContent).children('.tab-panel').hide();
    $(target).show();
  });
});

活动选项卡上已放置Active，并且内容已显示，但是，我似乎无法使以前的标签内容消失。

因此，任何帮助或解决方案都会有所帮助。

谢谢。

Answer 1

每次单击功能运行时，我都会为当前显示的面板创建一个引用，并隐藏前一个（如果存在）。

let current = null;

$(document).ready(function() {
  $('.tab-content > .tab-panel').hide();
  current = $('.tab-content > .tab-panel:first-of-type').show();
  

  $('.feature-tabs a').click(function(e) {
    e.preventDefault();

    var $this = $(this),
        tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
        link = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
        
    if (current) {
      current.hide();
    }
    
    current = $(target);

    //link.removeClass('active');
    $this.addClass('active');
    $(tabContent).children('.tab-panel').hide();
    $(target).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
    <section class="container">
      <section class="feature-tabs" data-tabgroup="productFeatureTabs">
        <li><a href="#InnovativeStorytelling" class="active">Innovative Storytelling</a></li>
        <li><a href="#ImmediateEmotionalFeedback">Immediate Emotional Feedback</a></li>
        <li><a href="#ExpandingDigitalLibrary">Expanding Digital Library</a></li>
      </section>

      <section class="tab-content" id="productFeatureTabs">
        <!-- start Innovative Storytelling -->
        <section id="InnovativeStorytelling" class="tab-panel">
          <section class="image">
            <img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
          </section>

          <section class="content">
            <img src="./images/read.svg" alt="Book">
            <h1>Innovative Storytelling</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Innovative Storytelling -->

        <!-- start Immediate Emotional Feedback -->
        <section id="ImmediateEmotionalFeedback" class="tab-panel">
          <section class="image">
            <img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
          </section>

          <section class="content">
            <img src="./images/emotion.svg" alt="Emotions">
            <h1>Immediate Emotional Feedback</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Immediate Emotional Feedback-->

        <!-- start Expanding Digital Library -->
        <section id="ExpandingDigitalLibrary" class="tab-panel">
          <section class="image">
            <img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
          </section>

          <section class="content">
            <img src="./images/idea.svg" alt="Light Bulb">
            <h1>Expanding Digital Library</h1>
            <p>Hello</p>
          </section>
        </section>
        <!-- end Expanding Digital Library-->
      </section>
    </section>
  </section>

Answer 2

您的问题出在第一次启动页面时的.show（）中，这会向元素display: block;添加一些内联代码，从而覆盖了面板的样式（即，隐藏没有.active的样式）），因为内联样式的优先级高于类样式。

如果您愿意，可以稍微简化一下代码，下面提供了一些具有相同功能的代码。此功能适用于页面上任意数量的标签页，但不允许您在另一个标签页组中（即，作为子标签页）使用标签页组。确实需要您在父div中添加类.feature-tabs-wrapper，该类同时包含菜单链接和面板（请参见下面的演示HTML的第三行）。

让我知道您是否还需要其他东西。

演示

// Activate the first panel for any tab setup on the page
$(".feature-tabs-wrapper").each(function() {

  $(this).find(".tab-panel").first().addClass("active");

})


// Add click event to the tab links
$(".feature-tabs > li > a").click(function() {

  // Remove active panel from any of the associated tabs
  $(this).closest(".feature-tabs-wrapper").find(".tab-panel.active").removeClass("active");

  // Get id of tab panel to be activated
  var tabID = $(this).attr("href");
  
  // Activate that tab panel
  $(tabID).addClass("active");

});

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="product-features">
  
  <section class="container feature-tabs-wrapper">
  
    <section class="feature-tabs" data-tabgroup="productFeatureTabs">
      <li><a href="#InnovativeStorytelling" class="active">Innovative Storytelling</a></li>
      <li><a href="#ImmediateEmotionalFeedback">Immediate Emotional Feedback</a></li>
      <li><a href="#ExpandingDigitalLibrary">Expanding Digital Library</a></li>
    </section>

    <section class="tab-content" id="productFeatureTabs">

      <!-- start Innovative Storytelling -->
      <section id="InnovativeStorytelling" class="tab-panel">
        <section class="image">
          <img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
        </section>

        <section class="content">
          <img src="./images/read.svg" alt="Book">
          <h1>Innovative Storytelling</h1>
          <p>Hello</p>
        </section>
      </section>
      <!-- end Innovative Storytelling -->

      <!-- start Immediate Emotional Feedback -->
      <section id="ImmediateEmotionalFeedback" class="tab-panel">
        <section class="image">
          <img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
        </section>

        <section class="content">
          <img src="./images/emotion.svg" alt="Emotions">
          <h1>Immediate Emotional Feedback</h1>
          <p>Hello</p>
        </section>
      </section>
      <!-- end Immediate Emotional Feedback-->

      <!-- start Expanding Digital Library -->
      <section id="ExpandingDigitalLibrary" class="tab-panel">
        <section class="image">
          <img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
        </section>

        <section class="content">
          <img src="./images/idea.svg" alt="Light Bulb">
          <h1>Expanding Digital Library</h1>
          <p>Hello</p>
        </section>
      </section>
      <!-- end Expanding Digital Library-->
    </section>
  </section>
</section>

Answer 3

此代码对我有用你可以尝试

代码html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" value="" />

代码jquery

<section class="product-features">
<section class="container">
    <ul class="feature-tabs" data-tabgroup="productFeatureTabs">
        <li><a href="#InnovativeStorytelling" class="">Innovative Storytelling</a></li>
        <li><a href="#ImmediateEmotionalFeedback">Immediate Emotional Feedback</a></li>
        <li><a href="#ExpandingDigitalLibrary">Expanding Digital Library</a></li>
    </ul>

    <section class="tab-content" id="productFeatureTabs">
        <!-- start Innovative Storytelling -->
        <section id="InnovativeStorytelling" class="tab-panel active">
           a
        </section>
        <!-- end Innovative Storytelling -->
        <!-- start Immediate Emotional Feedback -->
        <section id="ImmediateEmotionalFeedback" class="tab-panel hidden">
            b
        </section>
        <!-- end Immediate Emotional Feedback-->
        <!-- start Expanding Digital Library -->
        <section id="ExpandingDigitalLibrary" class="tab-panel hidden">
            c
        </section>
        <!-- end Expanding Digital Library-->
    </section>
</section>

标签内容不隐藏jQuery

3 个答案:

演示