页面的head部分，下引入必要的CSS样式文件、jQuery库和JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/tabstyle.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>

页面的body部分，多个a标签作为选项按钮，标签页用了div容器和iframe来显示内容，代码如下：

<div class="wapper">
	<div class="menu">
		<a href="content.html#1">菜单管理</a>
		<a href="content.html#2">角色管理</a>
		<a href="content.html#3">人员管理</a>
		<a href="content.html#4">角色权限配置</a>
		<a href="content.html#5">用户管理</a>
		<a href="content.html#6">工单管理</a>
		<a href="content.html#7">创建新装单</a>
		<a href="content.html#8">查询单据</a>
		<a href="content.html#9">费用管理</a>
		<a href="content.html#10">财务报帐</a>
		<a href="content.html#11">企业维护</a>
		<a href="content.html#12">省份维护</a>
		<a href="content.html#13">国家维护</a>
		<a href="content.html#14">GPS地址位置管理</a>
		<a href="content.html#15">点管理</a>
		<a href="content.html#16">富雅安康</a>
		<a href="content.html#17">事事顺心</a>
		<a href="content.html#18">阖家幸福</a>
		<a href="content.html#19">笑口常开</a>
		<a href="content.html#20">神清气爽</a>
		<a href="content.html#21">天天向上</a>
	</div>
	<br><br><br><br>
	<!--菜单HTML Start-->
	<div id="page-tab">
		<button class="tab-btn" id="page-prev"></button>
		<nav id="page-tab-content">
			<div id="menu-list">                </div>
		</nav>
		<button class="tab-btn" id="page-next"></button>
		<div id="page-operation">
			<div id="menu-all">
				<ul id="menu-all-ul">
				</ul>
			</div>
		</div>
	</div>
	<!--菜单HTML End-->
	<!--iframe Start (根据页面顶部占用高度，自行调整高度数值)-->
	<div id="page-content" style="height: calc(100% - 155px);"></div>
	<!--iframe End-->
</div>

页面的底部，需启用插件，代码如下：

<script type="text/javascript">
//初始化a标签链接到tab
$(".menu a").tab();
</script>