引导4选项卡内容不起作用
引导4选项卡内容不起作用
提问于 2018-02-03 17:02:28
我试着用Bootstrap 4制作一个选项卡内容，这对我来说是非常新的。以下是我到目前为止所拥有的：
.tabbed-sidebar {
margin-top: 1.5rem;
border: 1px solid #d9d9d9;
max-width: 320px;
margin: 10px auto;
}
.tabbed-sidebar .tabbed-heading {
color: #333;
background-color: #fafafa;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #ccc;
padding: 5px 5px 0 5px;
}
.tabbed-sidebar .nav-tabs {
display: flex;
border-bottom: none;
margin-bottom: -1px;
}
.tabbed-sidebar .nav-tabs li {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 1px;
}
.tabbed-sidebar .nav-tabs li a {
text-decoration: none;
color: #565656;
display: block;
border: 1px solid #ccc;
padding: 5px;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.tabbed-sidebar .nav-tabs li a.active {
border-bottom: 1px solid #fff;
background: #fff;
}
.tabbed-sidebar .tabs-content {
background: #fff;
border-radius: 0 0 3px 3px;
padding: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabbed-sidebar">
<div class="tabbed-heading">
<ul class="nav nav-tabs">
<li><a class="active" href="#popular" data-toggle="tab">Popular</a></li>
<li><a href="#video" data-toggle="tab">Video</a></li>
<li><a href="#topcomments" data-toggle="tab">Top comments</a></li>
</ul>
</div>
<div class="tabs-content">
<div class="tab-pane fade in active" id="popular">
sqxq
</div>
<div class="tab-pane fade" id="video">
ssss
</div>
<div class="tab-pane fade" id="topcomments">
dddd
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
据我所见，这个“选项卡式内容”存在2问题：
- 与活动选项卡对应的内容不显示在文档加载上；
- 与非活动选项卡对应的内容不会逐渐隐藏(褪色)。相反，它的不透明度设置为0。
我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-03 17:30:11
第一个问题：与活动选项卡对应的内容没有显示在文档加载上
若要使选项卡淡入，请将.fade添加到每个..tab窗格中。第一个选项卡窗格还必须有.show以使初始内容可见。
尝尝这个
<div class="tab-pane fade show in active" id="popular">第二个问题：与非活动选项卡对应的内容没有逐渐隐藏(褪色)。相反，它的不透明度设置为0。
在Bootstrap中，.fade转换时间是0.15秒，所以您只需要根据您的意愿调整它。例如：
CSS:
.fade {
opacity: 0;
transition: opacity 1.15s linear;
}jQuery:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var current = e.target.getAttribute('href');
var prev = e.relatedTarget.getAttribute('href');
$(current).show();
$(prev).hide();
});这是一个小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48599795
复制相关文章
相似问题
腾讯云开发者
