JS实例TAB切换

最近在各大游戏门户网站逛，发现都有拼音检索，思考了下其实就是TAB切换，于是就动手做了一个，直接上图，效果如下



点击字母，根据字母，下方切换游戏名字。我主要使用了JQUERY和JS数组配合完成，JQ用来实现切换，数组用来保存游戏名称数据。

显示游戏名称的是UL LI 列表。每次切换根据字母加载对应数组中的内容。HTML代码如下。

<div class="py_title">
<div class="fl">
<span class="orange fb f14">拼音检索：</span>
</div>
<div class="fl py_tab">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span class="hover">h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
</div>
<div class="py_txt">
<ul class="ml10">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

LI的多少数量看你自己的需求。

这样的好处在于，每一个字母所对应的游戏名称都是使用的同一套UL列表，而不需创建多余的UL列表。

JS方面，思路在于把不同首字母游戏名称的数据存在对应名称的数组中。比如“阿凡达”就存在数组a中。

然后利用循环去读取每一个游戏名称，把它填写在li中即可。

下面附上JS代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".py_tab span").click(function(){
$(this).siblings().removeClass("hover");
$(this).addClass("hover");
var text=$(this).html();
var li=$(".py_txt li");

for(var i=0;i<py.length;i++){
if(text==py[i]){

for( var j=0;j<arr[i].length;j++){

li.get(j).innerHTML=arr[i][j];
}

}
}

});

});
var py=["a","b","c","d","","","","","","","",""];
var a=["AVA","阿凡龙","傲世","暗黑之门","暗黑破坏神","艾尔之光","艾米尔编年史","暗夜传说","ADUS","Alteil","Anarchy","Appie2","ARGO","ASTA"]
var b=["飚车","搏客OL","霸王大陆","宝3天地","宝贝坦克","宝宝总动员","布鲁布鲁卡卡","八仙外传","霸者无双","百年战争","白蛇传","BandMaster","BattleForge","霸王大陆","霸王大陆","霸王大陆","霸王大陆","霸王大陆","霸王大陆","霸王大陆","霸王大陆"]
var c=["苍天","苍穹","沧海","传说","传奇3","传奇世界","传世群英传","穿越OL","穿越火线","超级舞者","超级乐者","超级跑跑","赤壁","冲峰岛","春秋Ｑ传","冲峰岛","冲峰岛","冲峰岛","冲峰岛","冲峰岛","冲峰岛"]
var d=["地下城与勇士","地下城与勇士","大明龙权","大航海时代","东游记","夺宝传世","第九大陆","大话仙剑","斗战神","地牢骑士团","斗神","大秦天下","大话战国","大越传奇","漫画英雄","大越传奇","弹头奇兵","大越传奇","大越传奇","大越传奇","大越传奇"]
var arr=[a,b,c,d];
</script>

这里还用到了二维数组li.get(j).innerHTML=arr[i][j];这句就是给每一个LI赋值了。