tabs选项卡插件 - 二当家的

本文演示了tabs选项卡插件在同个页面默认状态、鼠标点击、事件延迟 300毫秒、回调函数的5种调用方法。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：选项卡/滑动门 > 选项卡切换难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

选项卡导航菜单HTML代码

<ul class="tab_menu">
    <li class="current"><a href="http://www.erdangjiade.com/js">jquery特效</a></li>
    <li><a href="http://www.erdangjiade.com/templates">网站模板</a></li>
</ul>

每个选项卡对应的切换内容

<div class="tab_box">
    <div>
        <ul>
            <li><span>▪</span><a href="http://www.erdangjiade.com/js/87.html" title="简单jQuery商品属性选择表单">简单jQuery商品属性选择表单</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/js/249.html" title="allinone rotator演示40种不同的焦点图轮播">allinone rotator演示40种不同的焦点图轮播</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/js/108.html" title="Infinite-Scroll无限滚动加载数据 ">Infinite-Scroll无限滚动加载数据</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/js/268.html" title="WebUploader大文件上传">WebUploader大文件上传 </a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/js/1.html" title="jQuery仿天猫完美加入购物车">jQuery仿天猫完美加入购物车</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><span>▪</span><a href="http://www.erdangjiade.com/templates/144.html" title="蓝色照明企业站模板下载">蓝色照明企业站模板下载</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/templates/9.html" title="素材火官网后台模板下载">素材火官网后台模板下载</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/templates/76.html" title="国外简单蓝色网站后台模板下载">国外简单蓝色网站后台模板下载</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/templates/75.html" title="素材火bootstrap后台中文版">素材火bootstrap后台中文版</a></li>
            <li><span>▪</span><a href="http://www.erdangjiade.com/templates/46.html" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
        </ul>
    </div>
</div>

演示一：默认状态

$('.demo1').Tabs();

演示二：默认状态

$('.demo2').Tabs({
    event: 'click'
});

演示三：事件延迟 300毫秒

$('.demo3').Tabs({
    timeout: 300
});

演示四：自动轮换 3秒间隔

$('.demo4').Tabs({
    auto: 3000
});

演示五：回调函数

$('.demo5').Tabs({
    event: 'click',
    callback: click_callback
});
function click_callback() {
    var index = $(".demo5").find("li.current").index();
    alert(index)
}

tabs选项卡插件 收藏