bootstrap tab标签
标签页用法
标签页组件分为两部分,导航区与面板区。导航区用于绑定点击事件,切换对应的面板。
导航区为一个<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" onclick="menucheck(0)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(1)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(2)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(3)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(4)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(5)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(6)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(7)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(8)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(9)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="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" onclick="menucheck(11)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(12)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="menucheck(13)"> <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3 </button> </li> <li class="list-group-item"> <button class="menu-item-left" onclick="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>