我很难搞清楚这里发生了什么。我需要根据选定的选项卡显示不同的轮播，但是当在标签之间切换时，它似乎会发生冲突。 这是图书馆问题吗？
<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>
答案 0 :(得分：2)
是的，这是Bootstrap 4的问题。它是由轮播指示器活动类干扰tab-pane和carousel-item活动类
文档含糊地提到了嵌套，但不清楚它们是指其他组件，还是仅仅是旋转木马（我会假设后者）
请注意，不支持嵌套转盘和转盘 通常不符合可访问性标准。
似乎没有办法解决这个问题，因为删除活动类会破坏旋转木马。
答案 1 :(得分：1)
我的代码手动添加和删除.active和.nav-link元素中的.tab-pane类。它是有效的。
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');
});
});
答案 2 :(得分：0)
我遇到了同样的问题，并为自己的项目找到了解决方法。我有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搞乱的部分。对我来说，这是间歇性地消除了'退色'。类，有时有两个标签为＆＃39; active＆＃39;。此外，当我点击返回到旋转木马（标签1）时，它没有添加一类活跃的＆＃39;到第一个轮播项目，所以我必须手动完成。
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');
}
});
});
我对此很新，所以上面的代码可能会更好我确定但它确实有效，这是最重要的事情！
答案 3 :(得分：0)
如果您可以从源代码编译引导程序，那么您只需要排除'.carousel-item'选择器。编辑'\js\src\tab.js'并直接替换（撰写本文时的第151行）：
const active = $(container).find(Selector.ACTIVE)[0]
使用：
const active = $(container).find(Selector.ACTIVE).not('.carousel-item')[0]
答案 4 :(得分：0)
嗨，这是由于轮播对.active类标签的干扰
$( ".carousel-inner .carousel-item" ).first().addClass( "active" );