一款jQuery多菜单标签页的Tab选项插件,点击最上面设置好的多个按钮,会在下面的标签窗口显示不同的内容,右侧的下拉导航菜单也可以点击来切换不同的标签,整体的实用性非常的强,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791