[原] 基于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 做人要厚道

相关日志

• [原] jquery-easyui的combotree在.net开发中不显示数据的问题 (2)
• [原] 建了一个google code项目：jquery myhint plugin (0)
• [原] 总算实现SWFUpload和easyui的DataGrid整合了 (0)