利用jquery写的一个TAB页切换效果

函数如下

[javascript]view plaincopy

1. /**
2. *切换效果
3. */
4. function switab(tab,con,tab_c_css,tab_n_css,no) {
5. $(tab).each(function(i){
6. if(i == no)
7. {
8. $(this).addClass(tab_c_css);
9. }else
10. {
11. $(this).removeClass(tab_c_css);
12. $(this).addClass(tab_n_css);
13. }
14. })
15. if (con)
16. {
17. $(con).each(function(i){
18. if(i == no)
19. {
20. $(this).show();
21. }else
22. {
23. $(this).hide();
24. }
25. })
26. }
27. }

使用前提条件：

加载jquery类

页面上有一个系列的切换的头和主体，如

tab头：

<div >标题3</li>

但为了代码分离，建义使用前面的方法

switab函数参数介绍：

1.要切换的标题的批配条件，不要用ID，因为jquery用ID的话，找到的是一个对像，而不是对像数组，可以用name/class 或是父的过渡到子的，就像我例子上的／

2.主体内容批配的条件

3.标题为点中时的样式

4.标题为非选中状态时的样式

5.当前第几个，从0开始

由于用了jquery就不需要为标题／内容定义特殊的ID了，只要jquery能定位到这些就可以了。代码灵活性提高了，同时JS与HTML代码实现了完全分离！

另外如果以后要增加标签项，JS不用动，直接加就可以了。只要标题和内容相批配就行了