bootstrap中利用Tag实现多个div的上下页切换

Posted 2021-01-24 nanju

添加 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>上一页&nbsp;&nbsp;&nbsp;&nbsp;</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>上一页&nbsp;&nbsp;&nbsp;&nbsp;</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可选择其他方式，继续研究。