引导活动选项卡通过覆盖背景可见
Bootstrap active tab is seen through overlay background
我正在使用Bootstrap和Bootstrap选项卡。我在自定义叠加背景中淡出,由于某种原因,活动选项卡在过渡期间会穿过背景。我想不通这个。
斯菲德尔
.HTML
<div id="container" style="display:none;">
<div id="bg">
</div>
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
.CSS
#bg {
background: rgba(0, 0, 0, 0.50);
bottom: 0;
left: 0;
right: 0;
top: 0;
position: fixed;
z-index: 2000;
}
* {
transition: all 250ms;
}
.JS
$('#container').fadeIn();
更改
#bg {z-index: 2000;}
自
#bg {z-index: 0;}
或
.nav-tabs>li {
z-index: 2001;
}
相关文章:
- 防止模式背景覆盖在每个打开的新模式上变得更暗
- 根据覆盖的背景区域的亮度更改文本颜色
- 多个背景图像,一个覆盖另一个
- 在具有动态高度的背景图像上创建渐变覆盖
- 如何防止引导模式对话框的背景覆盖整个屏幕
- 如何在滚动/调整大小时保持背景图像覆盖屏幕
- JavaScript 动态创建覆盖背景
- 如何模拟背景大小:在
上覆盖
- 如何在移动浏览器中制作固定背景以覆盖整个屏幕
- Twitter Bootstrap 模态背景不会覆盖 iPad 上的整个屏幕
- 由视频覆盖的引导导航栏 - 如何用不透明背景覆盖它
- 引导活动选项卡通过覆盖背景可见
- 如何单击未完全覆盖背景的对象,并在悬停时消失,同时通过窗口对象退出元素
- 如何使弹出窗口在屏幕中心和覆盖/背景到全屏高
- 覆盖背景:在CSS中使用背景色的url
- 设置/覆盖背景颜色时的jQuery/CSS优先级
- 如何将DIV向后移动&第四个缓慢地覆盖背景
- 如何点击一个没有完全覆盖背景并在悬停时消失的对象
- HTML5视频覆盖背景中断与smoothState.js
- 自动设置覆盖背景图像的高度