插件描述：jquerytab 是一款列表页面标签 tab 插件
更新时间：2019-08-15 09:51:23
jquery-tab
一、介绍
jquery-tab 是一款列表页面标签 tab 插件。
二、教程
2.1 引入资源文件
html
1 2 3 | <link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="js/waves-0.7.5/waves.min.css"><link rel="stylesheet" href="css/jquery-tab.css"> |
2.2 页面布局
总体上需要 2 部分：导航菜单和子窗口容器。
html
1 2 3 4 5 6 7 8 9 10 11 12 | <div > <div > <ul id="nav"> <li><a href="javascript:;" data-url="home.html">菜单一</a></li> <li><a href="javascript:;" data-url="home2.html">菜单二</a></li> <li><a href="javascript:;" data-url="home3.html">菜单三</a></li> </ul> </div> <div > <div id="tab-container"></div> </div></div> |
注意：
1. ul 元素负责包裹导航菜单，同时在子孙元素 a 标签中使用自定义属性 data-url 配置页面 url。
2. 任意 div 负责充当子窗口容器，其中 tab-container 为容器 id。
2.3 调用插件
javascript
1 2 3 4 5 6 7 8 9 10 11 | $(function() { $("#tab-container").tab({ homeUrl: "home.html", // 首页地址 homeName: "菜单一", // tab 栏标题名 bottom: 175, // 距离底部高度 tabCallback: function(url, tab) { // 点击 tab 后的回调函数 console.log(url) // tab 对应的页面 url console.log(tab) // tab 元素 } });}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery图片无限循环轮滚动件ScrollPic.js（原创）
- 下一个特效： 圆形动态百分比插件progress.js