文章/答案/技术大牛

发布

社区首页 >问答首页 >选项卡内容不隐藏jQuery

问选项卡内容不隐藏jQuery
EN

Stack Overflow用户

提问于 2018-12-23 22:59:05

回答 3查看 96关注 0票数 0

因此，我试图创建一组选项卡，但是，当我移动选项卡时，内容并没有隐藏--它只是被堆叠起来。

这是我的密码

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>

$(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正在被放置在选项卡上，而内容正在显示，但是，我似乎无法使以前的选项卡内容消失。

所以任何帮助或解决方案都是有帮助的。

谢谢。

javascript

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-12-23 23:14:30

每次运行单击函数时，我都会创建对当前显示面板的引用，如果存在，则隐藏前面的内容。

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>

票数 0

Stack Overflow用户

发布于 2018-12-23 23:31:39

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

您可以稍微简化代码，如果您愿意的话，我在下面提供了一些代码，它们的功能与您想要的功能相同。这适用于页面上的任意数量的选项卡，但不允许您在另一个选项卡组中(即作为子选项卡)。它要求您将类.feature-tabs-wrapper添加到包含菜单链接和面板(参见下面演示HTML的第三行)的父div中。

如果你还需要什么就告诉我。

演示

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

票数 0

Stack Overflow用户

发布于 2018-12-24 05:03:39

这段代码对我有用，你可以试试

代码html

<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

(function () {
        var $tabNavigation = $(".feature-tabs a");
        if ($tabNavigation.length > 0) {
            $tabNavigation.on("click", function (e) {
                $('body').find('.feature-tabs li').each(function (index, value) {
                    $(value).removeClass('active');
                })
                $(this).tab("show");

                $('body').find('.tab-panel').each(function (index, value) {
                    if (!$(value).hasClass('active')) {
                        $(this).addClass('hidden');
                    } else {
                        $(this).removeClass('hidden');
                    }
                })
                e.preventDefault();
                return false;
            });
        }
    })();

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53907794

复制

相似问题

问选项卡内容不隐藏jQuery
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选项卡内容不隐藏jQueryEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选项卡内容不隐藏jQuery
EN