Bootstrap 标签页（Tab）插件

最新推荐文章于 2020-04-03 22:17:13 发布

原创最新推荐文章于 2020-04-03 22:17:13 发布 · 908 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #标签 #插件 #java

本文介绍了一个用于查询汽车车型及价格信息的系统。该系统通过标签页切换展示不同类型的汽车数据，并使用表格形式呈现具体信息，包括车型和价格等内容。系统还提供了分页功能以便用户浏览大量数据。

<div class="tabbable" >
		<ul class="nav nav-tabs" id="myTab">
			<li class="active">
			<!-- href="#home"指向页面中的锚id="home" -->
				<a data-toggle="tab" href="#home">
					<i class=" "></i>
					汽车车型
				</a>
			</li>
			<li>
				<a data-toggle="tab" href="#profile">
					 汽车价格
				</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="home" class="tab-pane in active" >
			   <div class="col-xs-12">
			   		<table id="traincodeGridTable" style="background-color:#FFFFFF"></table>
					<div id="traincodePager"></div>
			   </div>
			</div>
			 <div id="profile" class="tab-pane">
			    <div class="col-xs-12">
			      	<table id="gridTable" style="background-color:#FFFFFF"></table>
			      	<div id="gridPager"></div>
				 </div>
			</div> 
		</div>
	</div>