标签页用法
标签页组件分为两部分,导航区与面板区。导航区用于绑定点击事件,切换对应的面板。
导航区为一个<ul>列表,要求<ul>带"nav nav-tabs"或"nav nav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属 性,你可以通过data-target或href指定对应的面板。
面板区容器要求带"tab-content"类名,下面的每个面板都要求带"tab-pane"类名。
导航栏:
<!DOCTYPE html>
<html>
<head>
<title>tab.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet"
href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body{margin: 0 auto;width:800px;margin-top: 60px;}
.tab-content{padding:20px 20px;}
.log{float:right;list-style: none;margin-top:-19px;}
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li ><a href="#Java" role="tab" data-toggle="tab">Java</a></li>
<li ><a href="#JavaScript" role="tab" data-toggle="tab">JavaScript</a></li>
<li ><a href="#JQuery" role="tab" data-toggle="tab">JQuery</a></li>
<li ><a href="#HTML" role="tab" data-toggle="tab">HTML</a></li>
<li ><a href="#CSS" role="tab" data-toggle="tab">CSS</a></li>
</ul>
<!-- 面板区 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="Java">Java</div>
<div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>
<div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>
<div role="tabpanel" class="tab-pane" id="HTML">HTML</div>
<div role="tabpanel" class="tab-pane" id="CSS">CSS</div>
</div>
</body>
</html>
菜单栏:
<!DOCTYPE html>
<html>
<head>
<title>tab_right.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!-- Bootstrap3.3.5 CSS -->
<link rel="stylesheet"
href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.panel-group {
max-height: 770px;
overflow: auto;
}
.leftMenu {
margin: 10px;
margin-top: 5px;
}
.leftMenu .panel-heading {
font-size: 14px;
padding-left: 20px;
height: 36px;
line-height: 36px;
color: white;
position: relative;
cursor: pointer;
} /*转成手形图标*/
.leftMenu .panel-heading span {
position: absolute;
right: 10px;
top: 12px;
}
.leftMenu .menu-item-left {
padding: 2px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
}
.leftMenu .menu-item-left:hover {
background: #C4E3F3;
border: 1px solid #1E90FF;
}
.li_tab{
width:270px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="panel-group table-responsive" role="tablist">
<div class="panel panel-primary leftMenu">
<!-- 利用data-target指定要折叠的分组列表 -->
<div class="panel-heading" id="collapseListGroupHeading1"
data-toggle="collapse" data-target="#collapseListGroup1"
role="tab">
<h4 class="panel-title">
分组1 <span class="glyphicon glyphicon-chevron-up right"></span>
</h4>
</div>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<div id="collapseListGroup1" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="nav nav-pills" >
<li class="li_tab">
<a href="#home" role="tab" data-toggle="tab">分组项1-1</a>
</li>
<li class="li_tab">
<a href="#Java" role="tab" data-toggle="tab">分组项1-2</a>
</li>
<li class="li_tab">
<a href="#JavaScript" role="tab" data-toggle="tab">分组项1-3</a>
</li>
<li class="li_tab">
<a href="#HTML" role="tab" data-toggle="tab">分组项1-4</a>
</li >
<li class="li_tab">
<a href="#home" role="tab" data-toggle="tab">分组项1-5</a>
</li>
<li class="li_tab">
<a href="#Java" role="tab" data-toggle="tab">分组项1-6</a>
</li>
<li class="li_tab">
<a href="#JavaScript" role="tab" data-toggle="tab">分组项1-7</a>
</li>
<li class="li_tab">
<a href="#HTML" role="tab" data-toggle="tab">分组项1-8</a>
</li >
<li class="li_tab">
<a href="#home" role="tab" data-toggle="tab">分组项1-9</a>
</li>
<li class="li_tab">
<a href="#Java" role="tab" data-toggle="tab">分组项1-10</a>
</li>
</ul>
</div>
</div>
<!--panel end-->
<div class="panel panel-primary leftMenu">
<div class="panel-heading" id="collapseListGroupHeading2"
data-toggle="collapse" data-target="#collapseListGroup2"
role="tab">
<h4 class="panel-title">
分组2 <span class="glyphicon glyphicon-chevron-down right"></span>
</h4>
</div>
<div id="collapseListGroup2" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="collapseListGroupHeading2">
<ul class="nav nav-pills">
<li class="li_tab">
<a href="#home" role="tab" data-toggle="tab">分组项2-1</a>
</li>
<li class="li_tab">
<a href="#Java" role="tab" data-toggle="tab">分组项2-2</a>
</li>
<li class="li_tab">
<a href="#JavaScript" role="tab" data-toggle="tab">分组项2-3</a>
</li>
<li class="li_tab">
<a href="#HTML" role="tab" data-toggle="tab">分组项2-4</a>
</li >
<li class="li_tab">
<a href="#home" role="tab" data-toggle="tab">分组项2-5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="Java">Java</div>
<div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>
<div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>
<div role="tabpanel" class="tab-pane" id="HTML">HTML</div>
<div role="tabpanel" class="tab-pane" id="CSS">CSS</div>
</div>
</div>
<script>
$(function(){
$(".panel-heading").click(function(e){
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});
</script>
</body>
</html>
通过 data 属性:
添加 data-toggle="tab"或 data-toggle="pill"到导航区ul中来启用标签页。
添加 nav 和nav-tabs类到导航区 ul中,将会应用 Bootstrap标签样式,添加nav 和 nav-pills类到导航区ul中,将会应用 Bootstrap胶囊式样式。
这样你直接引入 bootstrap.js 就能用了,但你必须为当中某个标签页的<li>元素指定"active"类名(active:激活当前对象)
注:如果你想用JavaScript明确指定哪个面板被激活,你要对它的某个标签页的链接使用tab("show")方法,
而不是作用于它的容器上。并且如果使用javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab'
仿tab:
<!DOCTYPE html>
<html>
<head>
<title>tab_right.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!-- Bootstrap3.3.5 CSS -->
<link rel="stylesheet"
href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.panel-group {
max-height: 770px;
overflow: auto;
}
.leftMenu {
margin: 10px;
margin-top: 5px;
}
.leftMenu .panel-heading {
font-size: 14px;
padding-left: 20px;
height: 36px;
line-height: 36px;
color: white;
position: relative;
cursor: pointer;
} /*转成手形图标*/
.leftMenu .panel-heading span {
position: absolute;
right: 10px;
top: 12px;
}
.leftMenu .menu-item-left {
padding: 2px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
}
.leftMenu .menu-item-left:hover {
background: #C4E3F3;
border: 1px solid #1E90FF;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="panel-group table-responsive" role="tablist">
<div class="panel panel-primary leftMenu">
<!-- 利用data-target指定要折叠的分组列表 -->
<div class="panel-heading" id="collapseListGroupHeading1"
data-toggle="collapse" data-target="#collapseListGroup1"
role="tab">
<h4 class="panel-title">
分组1 <span class="glyphicon glyphicon-chevron-up right"></span>
</h4>
</div>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<div id="collapseListGroup1" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item" >
<!-- 利用data-target指定URL -->
<button class="menu-item-left" data-target="test2.html" οnclick="menucheck(0)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(1)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(2)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(3)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(4)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(5)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(6)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(7)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(8)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(9)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(10)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
</button>
</li>
</ul>
</div>
</div>
<!--panel end-->
<div class="panel panel-primary leftMenu">
<div class="panel-heading" id="collapseListGroupHeading2"
data-toggle="collapse" data-target="#collapseListGroup2"
role="tab">
<h4 class="panel-title">
分组2 <span class="glyphicon glyphicon-chevron-down right"></span>
</h4>
</div>
<div id="collapseListGroup2" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="collapseListGroupHeading2">
<ul class="list-group">
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(11)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(12)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(13)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left" οnclick="menucheck(14)">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="Java">Java</div>
<div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>
<div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>
<div role="tabpanel" class="tab-pane" id="HTML">HTML</div>
<div role="tabpanel" class="tab-pane" id="CSS">CSS</div>
</div>
</div>
<script>
function menucheck(i){
if(i==0){
$("#home").show();
$("#Java").hide();
$("#JavaScript").hide();
$("#JQuery").hide();
$("#HTML").hide();
$("#CSS").hide();
}else if(i==1){
$("#home").hide();
$("#Java").show();
$("#JavaScript").hide();
$("#JQuery").hide();
$("#HTML").hide();
$("#CSS").hide();
}else if(i==2){
$("#home").hide();
$("#Java").hide();
$("#JavaScript").show();
$("#JQuery").hide();
$("#HTML").hide();
$("#CSS").hide();
}else if(i==3){
$("#home").hide();
$("#Java").hide();
$("#JavaScript").hide();
$("#JQuery").show();
$("#HTML").hide();
$("#CSS").hide();
}else if(i==4){
$("#home").hide();
$("#Java").hide();
$("#JavaScript").hide();
$("#JQuery").hide();
$("#HTML").show();
$("#CSS").hide();
}else if(i==5){
$("#home").hide();
$("#Java").hide();
$("#JavaScript").hide();
$("#JQuery").hide();
$("#HTML").hide();
$("#CSS").show();
}
}
$(function(){
$(".panel-heading").click(function(e){
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});
</script>
</body>
</html>