添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#center" aria-controls="center" role="tab" data-toggle="tab">选择基本信息</a></li>
<li role="presentation"><a href="#account" aria-controls="account" role="tab" data-toggle="tab">填写基本实验信息</a></li>
<li role="presentation"><a href="#exp_method_id" aria-controls="messages" role="tab" data-toggle="tab">实验原理</a></li>
<li role="presentation"><a href="#exp_diagram_id" aria-controls="exp_method_id" role="tab" data-toggle="tab">实验图</a></li>
<li role="presentation"><a href="#exp_code_id" aria-controls="exp_code_id" role="tab" data-toggle="tab">实验核心代码</a></li>
<li role="presentation"><a href="#exp_description_id" aria-controls="exp_description_id" role="tab" data-toggle="tab">实验功能描述</a></li>
<li role="presentation"><a href="#exp_result_id" aria-controls="exp_result_id" role="tab" data-toggle="tab">实验结果分析</a></li>
</ul>
js代码（使用 Javascript 来启用标签页）：
<script type="text/javascript">
$(‘#myTabs a[href="#center"]‘).tab(‘show‘)
$(‘#myTabs a[href="#account"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_method_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_diagram_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_code_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_description_id"]‘).tab(‘show‘)
$(‘#myTabs a[href="#exp_result_id"]‘).tab(‘show‘)
</script>
相应div里面的内容：
<div role="tabpanel" class="tab-pane fade in active" id="center">值</div>
<div role="tabpanel" class="tab-pane fade " id="account"></div>
......
可在每个div中设置上下页来切换不同div
<ul role="tablist"class="page">
<li role="presentation"><a href="#exp_result_id" aria-controls="exp_result_id" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-backward"></span>上一页 </a></li>
<li role="presentation"><a href="#account" aria-controls="account" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-forward"></span>下一页</a></li>
</ul>
<ul role="tablist"class="page">
<li role="presentation"><a href="#center" aria-controls="center" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-backward"></span>上一页 </a></li>
<li role="presentation"><a href="#exp_method_id" aria-controls="messages" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-forward"></span>下一页</a></li>
</ul>
......
js代码：
<script type="text/javascript">
var nr=document.getElementsByTagName(‘li‘);
for(i = 0; i< nr.length ; i++){
nr[i].onclick = function(){
alert( this.innerHTML )
}
for(i=nr.length; i>=0 ; i--){
nr[i].onclick = function(){
alert( this.innerHTML )
}
}
</script>
js循环div可选择其他方式，继续研究。
原文地址：https://www.cnblogs.com/nanju/p/10053012.html