您的位置：首页 > 其它

选项卡——nav

2015-08-09 00:00 183 查看
摘要: Bootstrap_nav



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>声明式触发选项卡（添加fade样式）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<style>
/*去掉a标签选中时的虚线框*/
a{
outline:none !important;
}

/*选中的标签加上红色的border—top*/
.nav-tabs > li.active > a{
border-top-color: #d12610 !important;
border-top-style: solid !important;
border-top-width: 3px !important;
}
</style>
<body>
     
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<br />
<br />
<!--下面是代码任务部分-->

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab2" class="nav nav-pills" role="tablist">
<li><a href="#fun" role="tab" data-toggle="pill">娱乐</a></li>
<li><a href="#house" role="tab" data-toggle="pill">房产</a></li>
<li><a href="#internal" role="tab" data-toggle="pill">国内</a></li>
<li><a href="#external" role="tab" data-toggle="pill">国外</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane active" id="fun">娱乐内容面板</div>
<div class="tab-pane" id="house">房产内容面板</div>
<div class="tab-pane" id="internal">国内内容面板</div>
<div class="tab-pane" id="external">国外内容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  nav
相关文章推荐
新的分享
章节导航