jQuery Tab选项卡插件jquery.tabs.js

使用方法：

引入jQuery库文件、插件JS文件

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

核心CSS样式

/* box */
.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;}

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及以上 Firefoxa>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和CSS3a>li>
          ul>
      div>
  div>
div>

兼容好、效果齐全、使用方便，值得分享给大家