一款jquery列表页面标签插件

更新时间：2019-08-15 09:51:23

jquery-tab

一、介绍

jquery-tab 是一款列表页面标签 tab 插件。

二、教程

2.1 引入资源文件

html

<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

<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

$(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 元素
        }
    });
});

PREVIOUS:
NEXT:
圆形动态百分比插件progress.js
jQuery图片无限循环轮滚动件ScrollPic.js（原创）