目标:
使被动选项卡具有其他背景颜色。 基于预选,所选标签已具有白色背景颜色。 被动选项卡之间应该有一条线,主动和被动选项卡之间的颜色相同。为标签创建背景颜色和线条
问题:
如何为被动选项卡和被动选项卡之间的线条创建背景颜色?
信息:
*我使用的是引导3
*我只为了为了方便通信,显示下面的图片使用涂料。
目标:
使被动选项卡具有其他背景颜色。 基于预选,所选标签已具有白色背景颜色。 被动选项卡之间应该有一条线,主动和被动选项卡之间的颜色相同。为标签创建背景颜色和线条
问题:
如何为被动选项卡和被动选项卡之间的线条创建背景颜色?
信息:
*我使用的是引导3
*我只为了为了方便通信,显示下面的图片使用涂料。
如果我正确理解你的话。您需要在CSS中进行这些更改。
.nav-tabs>li>a {
background: #efefef ;
margin-right: 0 !important;
}
.nav-tabs>li>a:not(.active) {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li.active>a {
background: #fff !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
谢谢你的帮助! –
http://plnkr.co/edit/gO2VObU6996tQtBL9VLA?p=preview –
What'sUP先生,怎么能得到你的名誉4252,反正你不知道怎么问,我不是在点interrested很好的问题 – core114
! –
耶我也是先生 – core114