tabs选项卡插件

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

淘建站为您提供更多_选项卡/滑动门_选项卡切换_选项卡_tabs切换，在此特别感谢您对我们的支持与厚爱！

选项卡导航菜单HTML代码

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

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

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