• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery tab插件使用说明

jQuery tab插件使用说明

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2008-05-08
• 实例一
  jQuery tab插件 结构：
   代码如下 复制代码
  <div class="tabWrap">  
  <ul class="tabBox">  
  <li><a href="#nogo">tab1 </a></li>  
  <li><a href="#nogo">tab2 </a></li>  
  <li><a href="#nogo">tab3 </a></li>  
  <li><a href="#nogo">tab4 </a></li>  
  <li><a href="#nogo">tab5 </a></li>  
  </ul>  
  <div class="tabContent">  
  <div class="tcon">1111</div>  
  <div class="tcon">2222</div>  
  <div class="tcon">3333</div>  
  <div class="tcon">4444</div>  
  <div class="tcon">5555</div>  
  </div>  
  </div>
   
  jQuery tab插件 插件代码：
   代码如下 复制代码
  $(function () {
  $.fn.tabs = function (options) {
  var settings = {
  tabList: "",
  tabContent: "",
  tabOn:"",
  action: ""
  };
  var _this = $(this);
  if (options) $.extend(settings, options);
  _this.find(settings.tabContent).eq(0).show(); //第一栏目显示
  _this.find(settings.tabList).eq(0).addClass(settings.tabOn);
  if (settings.action == "mouseover") {
  _this.find(settings.tabList).each(function (i) {
  $(this).mouseover(function () {
  $(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);
  var _tCon = _this.find(settings.tabContent).eq(i);
  _tCon.show().siblings().hide();
  }); //滑过切换
  });
  }
  else if (settings.action == "click") {
  _this.find(settings.tabList).each(function (i) {
  $(this).click(function () {
  $(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);
  var _tCon = _this.find(settings.tabContent).eq(i);
  _tCon.show().siblings().hide();
  }); //点击切换
  });
  };
  };
   
  //调用方式：
   代码如下 复制代码
  $(".tabWrap").tabs({
  tabList: ".tabBox li",  //tab list
  tabContent: ".tabContent .tcon", //内容box
  tabOn:"on", //当前tab类名
  action: "mouseover" //事件，mouseover或者click
  });
  });
  实例二
  html代码
   代码如下 复制代码
  <div class="tab">
  <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul>
  <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul>
  </div>
   
  <div class="tab">
  <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul>
  <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul>
  </div>
   
  
  css代码
   代码如下 复制代码
  ul,li{ list-style:none;}
  .tab{ width:450px; margin:0 auto 50px;}
  .tab-hd { background:#F93; overflow:hidden; zoom:1;}
  .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
  .tab-hd li.active{ background:#F60;}
  .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
  
  jquery代码
   代码如下 复制代码
  $(function(){
   function tabs(tabTit,on,tabCon){
     $(tabCon).each(function(){
        $(this).children().eq(0).show();
     });
   $(tabTit).each(function(){
       $(this).children().eq(0).addClass(on);
   });
    $(tabTit).children().hover(function(){
          $(this).addClass(on).siblings().removeClass(on);
           var index = $(tabTit).children().index(this);
           $(tabCon).children().eq(index).show().siblings().hide();
      });
       }
    tabs(".tab-hd","active",".tab-bd");
     });
  
• jQuery判断元素是否存在方法总结 :上一篇
  jQuery 1.4新特性及其变化 :下一篇