Bootstrap 垂直选项卡自动更改

【问题标题】：Bootstrap Vertical Tabs auto changeBootstrap 垂直选项卡自动更改
【发布时间】：2016-02-05 12:09:27
【问题描述】：

我有一些垂直选项卡可以更改框中的内容。

我希望这些选项卡自行自动更改，但似乎无法正常工作。

这是我的代码：

<div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Architect</a></li>
                                <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">AIA</a></li>
                                <li class=""><a href="#tab3" data-toggle="tab" class="tehnical">IRS </a></li>
                                <li class=""><a href="#tab4" data-toggle="tab" class="tehnical">AKIN GUMP</a></li>
                                <li class=""><a href="#tab5" data-toggle="tab" class="tehnical">PWC</a></li>
                                <li class=""><a href="#tab6" data-toggle="tab" class="tehnical">EPA</a></li>
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">
                                <div class="tab-pane fade" id="tab1">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o"><img class="img-responsive" src="images/Awards/R&D.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Architect Magazine</h2>
                                            <p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early 1930s. The product impressed all three jurors.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade active in" id="tab2">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="http://info.aia.org/aiarchitect/thisweek07/1005/1005n_epa.htm"><img class="img-responsive" src="images/Awards/AIA.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>AIA Awards</h2>
                                            <p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse. 
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab3">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="https://www.irs.gov/pub/irs-wd/1404001.pdf"><img class="img-responsive" src="images/Awards/IRS.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>IRS Awards</h2>
                                            <p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab4">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="https://www.akingump.com/en/news-insights/david-burton-examines-irs-private-letter-ruling-on-drywall.html"><img class="img-responsive" src="images/Awards/AkinGump.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Akin Gump Awards</h2>
                                            <p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab5">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="http://www.pwc.com/us/en/tax-accounting-services/newsletters/accounting-methods/new-rulings-provide-guidance-tax-accounting-method-issues.html"><img class="img-responsive" src="images/Awards/PWC.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>PWC Awards</h2>
                                            <p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions
                                            The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc. 87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B). 

                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab6">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="http://www3.epa.gov/region9/waste/solid/construction/lifecyclebuilding/#win"><img class="img-responsive" src="images/Awards/US.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <h2>EPA Awards</h2>
                                            <p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/.tab-content-->
                        </div>
                        <!--/.media-body-->
                    </div>
                    <!--/.media-->

请有任何帮助！ 正如您所看到的，当用户单击左侧的选项卡时，右侧的内容会发生变化。我想以 5 秒的间隔循环浏览选项卡。

谢谢！

这是第二个框：

<div class="col-xs-12 col-sm-6 wow fadeInDown">
                <div class="tab-wrap">
                    <div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class=""><a href="#tab7" data-toggle="tab" class="analistic-01">Marek</a></li>
                                <li class=""><a href="#tab8" data-toggle="tab" class="analistic-02">Ozarks Bank</a></li>
                                <li class=""><a href="#tab9" data-toggle="tab" class="tehnical">CBRE </a></li>
                                <li class=""><a href="#tab10" data-toggle="tab" class="tehnical">Habitat</a></li>
                                <li class=""><a href="#tab11" data-toggle="tab" class="tehnical">Huffman</a></li>
                                <li class=""><a href="#tab12" data-toggle="tab" class="tehnical">Holiday</a></li>
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">
                                <div class="tab-pane fade" id="tab7">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/Marek.pdf"><img class="img-responsive" src="images/Referals/MarekBrothers.jpg"></a>
                                            <a href="Ref/Marek.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Marek</h2>
                                            <p>We recently built our new 50,000 SF headquarters building and used the Green-Zip Partition System everywhere.  To me, it’s a simple solution and one that everyone should take advantage of!
                                            <br>
                                            -<b>R. Stan Marek</b> / Chairman
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab8">
                                    <div class="media">
                                        <div class="pull-left boxImg" style="margin-top: 20px;">
                                            <a href="Ref/Ozarks.pdf"><img class="img-responsive" src="images/Referals/BankOfTheOzarks.jpg" style="margin-top: 30px;"></a>
                                            <a href="Ref/Ozarks.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Bank Of The Ozarks</h2>
                                            <p>….we now have a built in mechanism for remodeling that should be less expensive, less time consuming, and most importantly, environmentally friendly. <br>
                                            -<b>Mark D. Ross</b> / Vice-Chairman & COO
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab9">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/CBRE.pdf"><img class="img-responsive" src="images/Referals/CBRE.jpg"></a>
                                            <a href="Ref/CBRE.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>CBRE</h2>
                                            <p>….there is no reason not to consider Green Zip Tape as shorter-life property for any tax payer especially based on the design intent, which was originally based on the reusable concept.
                                            <br>
                                            -<b>Matt Rader</b> / National Managing Director
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab10">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/Habitat.pdf"><img class="img-responsive" src="images/Referals/Habitat.jpg"></a>
                                            <a href="Ref/Habitat.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Habitat for Humanity</h2>
                                            <p>I am very excited about the opportunity to help others have affordable and decent housing, while also keeping more products that can be reused from piling up in a local landfill.  Now that is a winning combination!
                                            <br>
                                            -<b>Ron Collins</b> / Vice President of ReStores
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab11">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/Huffman.pdf"><img class="img-responsive" src="images/Referals/Huffman.jpg"></a>
                                            <a href="Ref/Huffman.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Huffman Drywall</h2>
                                            <p>In addition to the sustainable benefits, the financial benefits associated with accelerated depreciation are valuable to me as an owner, and could potentially add to the building’s value in the event of a sale.
                                            <br>
                                            -<b>Brandon Huffman</b> / President
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab12">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/Holiday.pdf"><img class="img-responsive" src="images/Referals/Holiday.jpg"></a>
                                            <a href="Ref/Holiday.pdf">Click for Referance</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Holiday Inn</h2>
                                            <p>We found that the system will be acceptable for use in Holiday Inn, Holiday Inn Express hotels, and Staybridge Suites hotels. Congratulations.
                                            <br>
                                            -<b>Scott Bruce</b>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/.tab-content-->
                        </div>
                        <!--/.media-body-->
                    </div>
                    <!--/.media-->
                </div>
                <!--/.tab-wrap-->
            </div>
            <!--/.col-sm-6-->

【问题讨论】：

    标签： javascript jquery html css twitter-bootstrap


    【解决方案1】：

    我不确定是什么触发了您的更改，但如果它是应用于 &lt;li&gt; 元素的“活动”类，那么这应该适合您：

    jQuery:

    var cycle = {
  onReady: function() {
    $(".nav-stacked li:first").addClass("active in");
    $("#tab1").addClass("active in");

    setInterval(function() {
      var $navStacked = $("li.active");
      var tabContent = $("li.active a").attr("href");
      if ($navStacked.is(".nav-stacked li:last-child")) {
        $navStacked.removeClass("active in");
        $(".nav-stacked li:first").addClass("active in");
        $("div " + tabContent).removeClass("active in");
        $("div#tab1").addClass("active in");
      } else {
        $navStacked.removeClass("active in").next().addClass("active in");
        $("div " + tabContent).removeClass("active in").next().addClass("active in");
      }
    }, 5000);
  }
};
$(document).ready(cycle.onReady);

    HTML：

    <div class="media">
  <div class="parrent pull-left">
    <ul class="nav nav-tabs nav-stacked">
      <li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Architect</a></li>
      <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">AIA</a></li>
      <li class=""><a href="#tab3" data-toggle="tab" class="tehnical">IRS </a></li>
      <li class=""><a href="#tab4" data-toggle="tab" class="tehnical">AKIN GUMP</a></li>
      <li class=""><a href="#tab5" data-toggle="tab" class="tehnical">PWC</a></li>
      <li class=""><a href="#tab6" data-toggle="tab" class="tehnical">EPA</a></li>
    </ul>
  </div>

  <div class="parrent media-body">
    <div class="tab-content">
      <div class="tab-pane fade" id="tab1">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o"><img class="img-responsive" src="images/Awards/R&D.png"></a>
          </div>
          <div class="media-body">
            <h2>Architect Magazine</h2>
            <p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early
              1930s. The product impressed all three jurors.</p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab2">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="http://info.aia.org/aiarchitect/thisweek07/1005/1005n_epa.htm"><img class="img-responsive" src="images/Awards/AIA.png"></a>
          </div>
          <div class="media-body">
            <h2>AIA Awards</h2>
            <p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
            </p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab3">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="https://www.irs.gov/pub/irs-wd/1404001.pdf"><img class="img-responsive" src="images/Awards/IRS.png"></a>
          </div>
          <div class="media-body">
            <h2>IRS Awards</h2>
            <p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
            </p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab4">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="https://www.akingump.com/en/news-insights/david-burton-examines-irs-private-letter-ruling-on-drywall.html"><img class="img-responsive" src="images/Awards/AkinGump.png"></a>
          </div>
          <div class="media-body">
            <h2>Akin Gump Awards</h2>
            <p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks
              at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
            </p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab5">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="http://www.pwc.com/us/en/tax-accounting-services/newsletters/accounting-methods/new-rulings-provide-guidance-tax-accounting-method-issues.html"><img class="img-responsive" src="images/Awards/PWC.png"></a>
          </div>
          <div class="media-body">
            <h2>PWC Awards</h2>
            <p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc.
              87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).

            </p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="tab6">
        <div class="media">
          <div class="pull-left boxImg">
            <a href="http://www3.epa.gov/region9/waste/solid/construction/lifecyclebuilding/#win"><img class="img-responsive" src="images/Awards/US.png"></a>
          </div>
          <div class="media-body">
            <h2>EPA Awards</h2>
            <p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
            </p>
          </div>
        </div>
      </div>
    </div>
    <!--/.tab-content-->
  </div>
  <!--/.media-body-->
</div>
<!--/.media-->

    CodePen

    【讨论】：

    • 这适用于实际的标签！但是它没有将内容更改为右侧？
    • 你能发布 JavaScript 和/或链接到你用来控制标签的插件吗？
    • 它只是简单的引导程序。您建议的 JS 基本上是突出显示要激活的选项卡，而不是实际使它们“激活”
    • 我更新了答案。选项卡内容上的“活动”类需要与活动选项卡同步。
    • 这似乎起作用了，它现在确实改变了网络，但是它从 Architect 开始，但在 neth 下显示了架构师内容和 AIA 内容
    猜你喜欢
    • 1970-01-01
    • 2012-08-12
    • 2017-04-15
    • 2018-04-22
    • 2019-10-23
    • 1970-01-01
    • 2015-09-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode