jQuery tab 切换函数

今天接到的页面里面 有很多的切换 以前都是遇到切换临时用选择器写一个 
比如这样：

 

HTML：

<ul id="tab">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<div id="tab_con">
<div>内容一内容一内容一内容一</div>
<div>内容二内容二内容二内容二</div>
<div>内容三内容三内容三内容三</div>
</div>

脚本：

$("#tab").find("li").each(function(i){
     //标记当前状态
     $("#tab").find("li").eq(i).addClass("cur").siblings().removeClass("cur");
    //相应容器里面的容器显示或者控制
     $("#tab_con").find("div").eq(i).show().siblings().hide();
}) 
//(函数1)

现在麻烦来了 有很多很多的切换 不得不去写N段同样的代码。。这就效率低下了
还有 如果 你的 #tab_con 里面 不止有 div 还有几个ul该怎么办呢？ 如果你不想点击切换
而是想划过切换怎么办呢？如果你想多个地方都用切换效果怎么办呢？
所以得把它们统统给整成参数

现在我们整理一下需要参数化的东西
首先是 控制切换的容器 以及 这个容器底下来触发切换的标签
我们给它们命名为 id_tab tag_tab 
然后是 内容切换的容器 以及 这个容器底下来做相应切换的标签
我们给它们命名为 id_con tag_con
当然还得有 触发的方式 （这里稍后将会给我们带来麻烦~~）
有标记当前的样式 .cur

那么 我们现在先标记一下当前状态吧 这个函数很简单

function cur(ele){ 
$(ele).addClass("cur").siblings().removeClass("cur");
}

这个函数的意思是 该元素增加class cur 其兄弟元素取消 class cur

用法是 cur(this); 就足够了 这个函数我们备用 一会我们会在 tab 函数中调用它

现在我们来写 tab 函数

function tab(id_tab,tag_tab,id_con,tag_con){
$(id_tab).find(tag_tab).each(function(i){
$(id_tab).find(tag_tab).eq(i).click(
   function(){
    cur(this);
    $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
    }
   )           
}) 
}

是不是很简单呢？只是把 函数1 里面的可以变化的东西都提取了出来

$(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide(); 这一句 内容切换的主要函数 而且它避免了 

切换容器中其他容器被误选择 只对一种标签做切换

但是我们没有把触发方式给提取出来 而是在函数里固定了 click
下面我们就对这个进行改装
很自然的 我们得到了：

function tab(id_tab,tag_tab,id_con,tag_con,act){
$(id_tab).find(tag_tab).each(function(i){
$(id_tab).find(tag_tab).eq(i).act(
   function(){
    cur(this);
    $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
    }
   )           
}) 
}

是不是这样 我们就可以 给 act 赋值为 click mouseover 就可以了呢？
答案是 NO way 在FF 下虽然不报错 但是不运行 IE则报错 不知道其他高人有什么方法解决滴？

那只有写的复杂点 写成这样：
如果 act缺省 那就是 点击切换了 如果被赋值为 mouseover 则是 划过切换了

function tab(id_tab,tag_tab,id_con,tag_con,act){
if(!act){ act="click"};
if(act=="click"){
   $(id_tab).find(tag_tab).each(function(i){
   $(id_tab).find(tag_tab).eq(i).click(
   function(){
    cur(this);
    $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
    })           
   })  
   }
if(act=="mouseover"){
   $(id_tab).find(tag_tab).each(function(i){
   $(id_tab).find(tag_tab).eq(i).mouseover(
   function(){
    cur(this);
    $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
    })           
   })  
   } 
  
}

使用方法：

tab("#tri","li","#game_con","div","mouseover");

html:

<div class="ngame">
          <ul id="tri">
            <li class="cur">射手榜</li>
            <li>助攻榜</li>
            <li>红黄榜</li>
          </ul>
          <div id="game_con">
            <div>
              内容11111111
              
            </div>
            <div>
              内容222222
            </div>
            <div>
              内容333333

            </div>
          </div>
        </div>

tab(".tab_con","li",".tab_con","table");
用类作为选择符虽然效率低点 但是 可以多次重用 这个性质不错

tab("#tzxu","li","#tzxn","div");
不过最好还是用ID来做选择符 那效率高点

tab("#vtag","li","#vtagn","ul");
这些都是缺省的 点击切换

最后 别忘了一定要链上jQuery 的库文件啊 一定要在页面加载其他JS之前写啊 否则你会遇到莫名其妙的麻烦和错误 呵呵