快捷導(dǎo)航

javascript針對(duì)DOM的應(yīng)用分析（四）

更新時(shí)間：2012年04月15日 22:24:45 作者：

從這張開(kāi)始就和大家說(shuō)一些實(shí)用的效果的寫法。當(dāng)然首當(dāng)其沖的就是我們可愛(ài)的TAB選項(xiàng)卡，用JQ寫選項(xiàng)卡當(dāng)然是很方便的而且方法也很多。其實(shí)用原生的JS寫選項(xiàng)卡方法也很多

下面我就寫幾個(gè)給大家看看
一，點(diǎn)擊傳參方法

復(fù)制代碼代碼如下:

 
<script> 
function tab(dom){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i=0;i<list.length;i++){ 
if(list==dom){ 
list.className = "on"; 
con.style.display = "block"; 
} 
else{ 
list.className=""; 
con.style.display="none"; 
} 
} 
} 
</script> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div> 

我解釋一下
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
獲取dom元素，這個(gè)不用說(shuō)了吧。寫什么效果第一件事都是獲取元素

復(fù)制代碼代碼如下:

 
for(var i=0;i<list.length;i++){ 
if(list==dom){ 
list.className = "on"; 
con.style.display = "block"; 
} 
else{ 
list.className=""; 
con.style.display="none"; 
} 

遍歷一下所有的li元素，找到和傳進(jìn)來(lái)的dom一樣的東西，然后把他的class設(shè)置為on,并且把相對(duì)應(yīng)的div給顯示出來(lái)，其他的就全部把className設(shè)置為空，并且把對(duì)應(yīng)的div給隱藏。
大概就是這樣。但是大家肯定就都發(fā)現(xiàn)了這樣的寫法的缺點(diǎn)，就是每個(gè)li都要設(shè)置一個(gè)onclick時(shí)間傳入它自己。這樣有點(diǎn)違反了結(jié)構(gòu)與表現(xiàn)相分離的道理。所以我們就換種寫法
二，直接寫入鼠標(biāo)事件方法

復(fù)制代碼代碼如下:

 
<script> 
function tab(){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i = 0;i<list.length;i++) 
{ 
list.onclick=function(){ 
for(var i=0;i<list.length;i++){ 
if(list==this){ 
list.className = "on"; 
con.style.display = "block"; 
} 
else{ 
list.className=""; 
con.style.display="none"; 
} 
} 
} 
} 
} 
window.onload=function(){tab();} 
</script> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div> 

只是簡(jiǎn)單的改動(dòng)一下就可以了，因?yàn)樵贘S中有這些方法可以用比如onclick,onmouseover等等,但是用的時(shí)候我要先把所有的要用這個(gè)事件的元素都遍歷一下，如果那個(gè)被點(diǎn)擊就會(huì)傳入一個(gè)this,我們只需要像第一種方法一樣判斷一下list是不是和這個(gè)this相同，然后下面的操作和第一種方法一樣
（這樣兩種方法都是比較簡(jiǎn)單的寫法，在JS里還有一些比較高級(jí)復(fù)雜的寫法，但是用到的思想和這兩種寫法大多一樣。）
好了就到這里，建議大家可以用這種方法寫一個(gè)圖片切換效果，我想應(yīng)該很簡(jiǎn)單吧

下章繼續(xù)說(shuō)效果

您可能感興趣的文章: