jQuery支持数据回调功能的选项卡tab插件

使用方法：

引入CSS核心样式

.box{width:400px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{overflow:hidden;}
.tab_menu li{width:100px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_menu li a{color:#fff;text-decoration:none;}
.tab_menu li.current a{color:#333;}
.tab_box{padding:20px;}
.tab_box li{height:24px;line-height:24px;overflow:hidden;}
.tab_box li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.tab_box .hide{display:none;}}

引入jQuery库文件、插件JS文件、图片延迟加载插件（按需引入）

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.tabs.js"></script>

插件初始化

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

HTML结构

<div class="box demo1">
    <ul class="tab_menu">
        <li class="current"><a href="#">jquery特效</a></li>
        <li><a href="#">javascript 特效</a></li>
        <li><a href="#">div+css 教程</a></li>
        <li><a href="#">html5 教程</a></li>
    </ul>
    <div class="tab_box">
        <div>
            <ul>
                <li><span>▪</span><a href="#">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
                <li><span>▪</span><a href="#">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
                <li><span>▪</span><a href="#">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
                <li><span>▪</span><a href="#">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
                <li><span>▪</span><a href="#">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
            </ul>
        </div>
        <div class="hide">
            <ul>
                <li><span>▪</span><a href="#">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
                <li><span>▪</span><a href="#">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
                <li><span>▪</span><a href="#">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
                <li><span>▪</span><a href="#">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
                <li><span>▪</span><a href="#"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
            </ul>
        </div>
        <div class="hide">
            <ul>
                <li><span>▪</span><a href="#">div+css制作非常实用的24款分页页码css代码</a></li>
                <li><span>▪</span><a href="#">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
                <li><span>▪</span><a href="#">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li>
                <li><span>▪</span><a href="#">CSS如何定位工程</a></li>
                <li><span>▪</span><a href="#">用div+css制作一个CSS3的简约图标导航菜单</a></li>
            </ul>
        </div>
        <div class="hide">
            <ul>
                <li><span>▪</span><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
                <li><span>▪</span><a href="#">制作CSS3和HTML5的一个单页网站模板</a></li>
                <li><span>▪</span><a href="#">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
                <li><span>▪</span><a href="#">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
            </ul>
        </div>
    </div>
</div><!--demo1 end-->