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

是的，這是引導4個問題它是由傳送帶指標主動類與tab-pane和carousel-item活動類

文檔隱約提到築巢，但造成的干擾目前尚不清楚他們是指其他組件，還是一般的轉盤（我會假設後者）

請注意，不支持嵌套傳送帶，傳送帶 通常不符合輔助功能標準。

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

似乎有不被迂迴方式，去掉了主動類打破了傳送帶。

Answer 2

我的代碼manualy向/從.nav-link和.tab-pane元素添加和刪除類.active。這是工作。

HTML +引導-V4.0-β

<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. 保存當前網頁/標籤的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. 當點擊一個新的標籤，保存初始標籤/頁面ID作爲變量（prevPageId），獲得當前頁的ID，然後手動重置和更新先前的類和當前標籤。這是Bootstrap混亂的部分。對我來說，它是間歇性地刪除'淡入淡出'類，有時有兩個'積極'的標籤。另外，當我點擊迴旋轉盤（選項卡1）時，它並未向第1個輪播項目添加一個「活動」類，因此我必須手動執行此操作。

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

如果你可以編譯從源頭上引導所有你所要做的就是exlude的'.carousel-item'選擇。編輯'\js\src\tab.js'和只需更換（線151在寫作的時候）：

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

有：

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