今天接到的页面里面 有很多的切换 以前都是遇到切换临时用选择器写一个
比如这样：
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之前写啊 否则你会遇到莫名其妙的麻烦和错误 呵呵