Bootstrap 4 个旋转木马在选项卡内不起作用

Question

我很难弄清楚这里发生了什么。我需要根据选定的选项卡显示不同的轮播，但似乎有冲突，因为它在选项卡之间切换时开始中断。这是图书馆的问题吗？

<div class="bs-example">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#TAB1" data-toggle="tab">TAB1</a></li>
<li><a href="#TAB2" data-toggle="tab">TAB2</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="TAB1">
  <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel1" data-slide-to="1"></li>
      <li data-target="#myCarousel1" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placehold.it/350x150?text=1" alt="First Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=2" alt="Second Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=3" alt="Third Slide"/></div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div>
</div>
<div class="tab-pane fade" id="TAB2">
  <div id="myCarousel2" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel2" data-slide-to="1"></li>
      <li data-target="#myCarousel2" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placehold.it/350x150?text=4" alt="First Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=5" alt="Second Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=6" alt="Third Slide"/></div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div>
</div>
</div>
</div>

JS fiddle

Answer 1

是的，这是 Bootstrap 4 的问题。这是由轮播指示器活动 class 干扰 tab-pane 和 carousel-item 活动 class

文档含糊地提到了嵌套，但不清楚它们是指其他组件，还是通常指的是轮播（我假设是后者）

Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

https://v4-alpha.getbootstrap.com/components/carousel/

似乎没有任何办法解决这个问题，因为删除活动 class 会破坏轮播。

Answer 2

我的代码手动添加和删除 class .active to/from .nav-link 和 .tab-pane 元素。它的工作。

HTML+Bootstrap-v4.0-beta

<div class="row justify-content-center">
    <div class="col-6">
        <nav class="nav nav-pills flex-column flex-sm-row" role="tablist" id="myTabs">
            <a class="flex-sm-fill text-sm-center nav-link active" href="#overview" role="tab">Overview</a>
            <a class="flex-sm-fill text-sm-center nav-link" href="#characteristic" role="tab">Characteristic</a>
        </nav>
        <div class="tab-content mt-2" id="tabContent">
            <div class="tab-pane active" id="overview" role="tabpanel">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="http://englishxp.ru/wp-content/uploads/2015/01/some_any.jpg" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="http://uacrisis.org/wp-content/uploads/2017/04/Eurovision2017Ukraine-825x400.png" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="https://media.sweetwater.com/store/manufacturer/Gibson/about/sg_full.jpg" alt="Third slide">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

                <p>The <strong>Gibson Les Paul</strong> is a solid body electric guitar that was first sold by the Gibson Guitar Corporation in 1952.[1] The Les Paul was designed by Gibson president Ted McCarty, factory manager John Huis and their team, along with guitarist/inventor Les Paul.</p>
                <p>The Les Paul was originally offered with a gold finish and two P-90 pickups. In 1957, humbucking pickups were added, along with sunburst finishes in 1958. The sunburst 1958–1960 Les Paul – today one of the best-known electric guitar types in the world – was considered a failure, with low production and sales. For 1961, the Les Paul was redesigned into what is now known as the Gibson SG. This design continued as a separate guitar when the traditional single cutaway, carved top bodystyle was re-introduced in 1968. The Les Paul has been continually produced in countless versions and editions since. Along with Fender's Telecaster and Stratocaster, it was one of the first mass-produced electric solid-body guitars. Les Pauls have been used in many genres, including rock, country, pop, soul, rhythm and blues, blues, jazz, reggae, punk, and heavy metal.</p>
            </div>
            <div class="tab-pane" id="characteristic" role="tabpanel">
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <td colspan="2" class="table-info text-center"><strong>Construction</strong></td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Body type</td>
                            <td class="d-inline-block col-8">Solid, Single cut</td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Neck joint</td>
                            <td class="d-inline-block col-8">Sent-in</td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Scale</td>
                            <td class="d-inline-block col-8">24.75"</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="table-info text-center"><strong>Woods</strong></td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Body</td>
                            <td class="d-inline-block col-8">Mahogany, Maple top</td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Neck</td>
                            <td class="d-inline-block col-8">Mahogany</td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Fretboard</td>
                            <td class="d-inline-block col-8">Ebony</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="table-info text-center"><strong>Hardware</strong></td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Bridge</td>
                            <td class="d-inline-block col-8">Tune-o-matic</td>
                        </tr>
                        <tr>
                            <td class="d-inline-block col-4">Pickup(s)</td>
                            <td class="d-inline-block col-8">A Burstbucker 3 humbucker at the bridge, P-90H at the neck, and a piezoelectric built into the bridge.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

JavaScript

jQuery(document).ready(function() {

  let activeTab = $('#myTabs a').filter('.active');

  $('#myTabs a').click(function(e) {
    e.preventDefault();

    activeTab.removeClass('active');
    $(activeTab.attr('href')).removeClass('active');

    activeTab = $(this);

    activeTab.addClass("active");
    $(activeTab.attr('href')).addClass('active');
  });
});

CodePen

Answer 3

我遇到了同样的问题，并为我自己的项目找到了解决方法。我有 5 个选项卡，第一个（主页）有一个轮播，其他 4 个只是标准页面。我没有时间为你的例子实现它，但简而言之，这就是我修复我的方法：

1。通过搜索 class 为活动的 link，将当前 page/tab id 保存到加载变量。去掉散列，这样我们就可以用它来定位新点击的元素。

var currentPage = $('.nav-item a').filter('.active');
var pId = $(currentPage).attr('href');
var currentPageId = pId.substring(1, pId.length);
var prevPageId;
var pageId;

2。单击新选项卡时，将初始 tab/page id 保存为变量 (prevPageId)，获取当前页面的 id，然后手动重置并更新上一个和当前选项卡上的 classes。这是 Bootstrap 搞砸的部分。对我来说，它是间歇性地删除 'fade' class，有时有两个带有 'active' 的选项卡。此外，当我单击返回轮播（选项卡 1）时，它没有将 'active' 的 class 添加到第一个轮播项目，因此我必须手动执行此操作。

jQuery(document).ready(function() {

 $(".nav-item a").click(function(event) {

  prevPageId = currentPageId;
  var href = $(this).attr('href');
  pageId = href.substring(1, href.length);
  currentPageId = pageId;
  event.preventDefault();

  $('#' + prevPageId).removeClass('tab-pane fade show active');
  $('#' + prevPageId).addClass('tab-pane fade');
  $('#' + prevPageId).attr("aria-expanded","false");

  $('#' + currentPageId).removeClass('tab-pane fade');
  $('#' + currentPageId).addClass('tab-pane fade show active');
  $('#' + currentPageId).attr("aria-expanded","true");

  if (currentPageId === 'home') {
     $('.carousel-item:first').addClass('active');
  }

 });


});

我是新手，所以我敢肯定上面的代码可能会更好，但它确实有效，这是最主要的！

Answer 4

如果您可以从源代码编译 bootstrap，您所要做的就是排除 '.carousel-item' 选择器。编辑 '\js\src\tab.js' 并替换（撰写本文时的第 151 行）：

const active = $(container).find(Selector.ACTIVE)[0]

与：

const active = $(container).find(Selector.ACTIVE).not('.carousel-item')[0]

Answer 5

您好，这是由于干扰 .active class 选项卡与轮播

 $( ".carousel-inner .carousel-item" ).first().addClass( "active" );

Bootstrap 4 个旋转木马在选项卡内不起作用

Bootstrap 4 carousel not working inside tabs

jquery

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4