[原] 基于jQuery的自动TAB选项卡实现

jQuery挺好用，我就不说啥了。
今天实现了“自动TAB”，下面分享一下。有人会问为啥不用jquery-ui，主要是页面css已经全弄好了，实在不想为ui再写一次；其次是ui毕竟是那么大个家伙，心疼我的性能。
HTML页面非常简单：

  1. <div class="tabBox">
  2.     <!--选项卡菜单-->
  3.     <ul class="tabMenu">
  4.         <li class="on"><a>选项卡1</a></li>
  5.         <li><a>选项卡2</a></li>
  6.     </ul>
  7.     <!-- 选项卡内容-->
  8.     <div class="hide">
  9. 选项卡1内容
  10.     </div>
  11.     <div class="hide">
  12. 选项卡2内容
  13.     </div>
  14. </div>

之后就是用jQuery自动对这个.tabBox进行处理，加上鼠标点击自动切换的功能（当然可以加上鼠标移过的选项支持，作为示例，我就没写那么完善）：

  1. $(function () {
  2.     //===== TAB自动切换 tabBox =====
  3.     // <div class="tabBox">
  4.     //   <ul class="tabMenu"><li class="on"><a>选项卡1</a></li></ul>
  5.     //   <div class="hide">内容1</div>
  6.     // </div>
  7.     // (1) li增加"index"记录偏移量（第i项），给a增加click方法
  8.     $('.tabBox .tabMenu li').each(function(i, li) {
  9.         li = $(li);
  10.         li.attr('index', i)
  11.             .children('a').attr('href', 'javascript:;').click(function() {
  12.                 //点击项的li的class设为on
  13.                 var li_on = $(this).parent(),
  14.                     index = li_on.attr('index');
  15.                 li_on.parent().children().removeClass('on');
  16.                 li_on.addClass('on');
  17.                 //显示对应的div内容。注意get(index)返回的是DOM节点，因此需要再$()转为jQuery对象
  18.                 $(
  19.                     li_on.parent().parent().children('div').addClass('hide').get(index)
  20.                 ).removeClass('hide');
  21.         });
  22.         //显示现有的li class=on对应的div内容
  23.         if (li.hasClass('on')) {
  24.             li.children('a').click();
  25.         }
  26.     });
  27. });

©2012 便便代码人生. All Rights Reserved.

. 标签: jQuery, TAB, 选项卡

遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道

相关日志

posted @ 2009-07-24 01:03  便便嘘嘘  阅读(170)  评论(0)  编辑  收藏  举报