JS学习笔记—Tab切换特效

一个Tab切换特效的代码：

HTML代码：

<div class="tab"> 
<div id="tabsK"> 
<ul id="menu4"> 
<li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a></li> 
<li onclick="settab(4,1)"><a title="企业新闻"><span>企业新闻</span></a></li> 
<li onclick="settab(4,2)"><a title="行业新闻"><span>行业新闻</span></a></li> 
<li onclick="settab(4,3)"><a title="专栏文章"><span>专栏文章</span></a></li> 
<li onclick="settab(4,4)"><a title="科技新闻"><span>科技新闻</span></a></li> 
</ul> 
</div> 

<div class="tab2" id="main4"> 
<ul class="block"></ul> 
<ul > ssss</ul> 
<ul ></ul> 
<ul ></ul> 
<ul ></ul> 
</div> 
</div>

 

CSS代码：

<style type="text/css">
#tabsK { 
float:left; 
width:100%; 
line-height:normal; 
border-bottom:1px solid #54545C; 
} 
#tabsK ul { 
margin:0; 
padding:10px 10px 0 10px; 
list-style:none; 
} 
#tabsK li { 
display:inline; 
margin:0; 
padding:0; 
cursor:pointer; //cursor属性规定鼠标要显示的光标类型（形状）。值pointer意思是鼠标类型变成手的　　　　　　　　　　 形状
} 
#tabsK a { 
float:left; 
background:(urltableftK.gif) no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
#tabsK a span { 
float:left; 
display:block; 
background:url(tabrightK.gif) no-repeat right top; 
padding:8px 16px 4px 6px; 
color:#FFF; 
} 

#tabsK a span {float:none;} 
/* End IE5-Mac hack */ 


-------------------------------------------------------------------------------------
#tabsK a:hover span { 
cursor:pointer; 
color:#FFF; 
background-position:100% -42px；       /*利用样式覆盖的方法设置选中时的背景图片
}                                       PS：什么是样式覆盖？
#tabsK a:hover {                        #tabsK a{color:red;}
background-position:0% -42px;           #tabsK hover a{color:white;}
cursor:pointer;                         web页面在执行时，会优先执行表述更为具体
}                                       的属性，例子当中web会优先执行color:white*/
#tabsK .hover a                         
{ 
background-position:0% -42px; 
} 
#tabsK .hover span 
{ 
background-position:100% -42px; 
} 
-------------------------------------------------------------------------------------
.tab2 ul 
{ 
display:none; 
list-style-type:none; 
height:560px; 
} 
.tab2 ul li 
{ 
text-align:left; 
line-height:20px; 
text-indent:1em;       /*text-indent属性规定文本块中首行文本的缩进
}                       em是指字体高，任何未经定义的浏览器默认字体高均为16px                                      
                        所以未经调整的浏览器都符合1em=16px*/
.tab2 .block            

{ 
display:block; 
}
</style>

javaScript代码：

function settab(m,n)
{ 
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); 
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); 
for(i=0;i<tli.length;i++)
          { 
           tli[i].className=i==n?"hover":""; 
           mli[i].style.display=i==n?"block":"none"; 
          } 

 

    看了不少Tab切换的代码，给我一个感觉，在Tab切换特效中，JS的设计不管是简单还是复杂都只是占了代码的很小的一部分，而真正重要的是HTML的结构以及CSS样式的设计，一个漂亮的Tab切换是需要大量的CSS代码支撑的，所以当我初看这段代码时，望着冗长的CSS代码确实是愣神了一阵子，尤其是把这些代码带入HTML和JS当中再去模拟想象时，那种感觉真挺纠结的。。。呵呵，不知道是不是每个初学者都有过类似的体验呢？

    言归正传，通过对这段代码的学习使我受益颇多，不论是在HTML的整体结构架构上还是运用background来设置CSS特效实现与页面的交互，亦或者是在JS中利用getElenmentsByTagName获取对象、运用c?x:y条件表达式进行样式判断等等概念都使我有一种茅塞顿开的感觉，让我进一步开阔了视野。但是在拥有这些认知的基础上，我发觉这段代码也存在一定的局限性，利用getElenmentsByTagName获取对象固然不错，但是也限制了HTML的结构，用getElenmentsByName也许能得到更多的自主性，但是许多标签都不具备name属性，这也变相的限制了HTML的结构，做一个类似于myFo却cus的JS库或许是个不错的选择，但是我却是不具备那样的技术能力尝试着在百度上搜索了一下结果在脚本之家上还真发现类似的代码，在这里也贴出来分享下。

javaScript代码如下：

<script> 
var tabType={ 
trigger:'触发事件', 
tabCurrentClass:'当前tab的className' 
[,delay:'事件触发的延时', 
auto:'是否自动播放', 
timer:'自动播放周期'] 
} 
// tabType的前两个是必需参数，后面的3个可根据需要添加 
// 其后的tab->content对应关系以数组形式添加，以其id为参数识别，如下： 
// [tab1.id,content1.id,'o'],[tab2.id,content2.id],…… 
// 如果要设定某个tab默认是打开的，在后面加个”o”参数，如下： 
//eg: tabInit(tabType,[t1,c1,'o'],[t2,c2],…); 
} 
tabInit(type,['t1','c1','o'],['t2','c2'],['t3','c3']); 
</script> 

假设HTML代码如下：

<ul> 
<li id="t1">tab1</li> 
<li id="t2">tab2</li> 
<li id="t3">tab3</li> 
</ul> 
<div id="c1">content1</div> 
<div id="c2">content2</div> 
<div id="c3">content3</div> 

演示地址:http://demo.jb51.net/js/tab_switch/tab.html
打包下载地址:http://www.jb51.net/jiaoben/25777.html

   对于JS库我并没有发言权，在这也仅仅只是拿来主义，至于好用不好用那就是仁者见仁智者见智了。