jQuery多菜单标签页的Tab选项插件

来源:https://www.sucaihuo.com/js/2682.html 2017-08-09 23:26浏览(3289) 收藏

一款jQuery多菜单标签页的Tab选项插件,点击最上面设置好的多个按钮,会在下面的标签窗口显示不同的内容,右侧的下拉导航菜单也可以点击来切换不同的标签,整体的实用性非常的强,喜欢的童鞋请收下吧。
jQuery多菜单标签页的Tab选项插件
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2