DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript實例教程:點擊傳參方法和鼠標事件方法
Javascript實例教程:點擊傳參方法和鼠標事件方法
編輯:關於JavaScript     

從這張開始就和大家說一些實用的效果的寫法。當然首當其沖的就是我們可愛的TAB選項卡,用JQ寫選項卡當然是很方便的而且方法也很多。其實用原生的JS寫選項卡方法也很多。下面我就寫幾個給大家看看
一,點擊傳參方法
<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元素,這個不用說了吧。寫什麼效果第一件事都是獲取元素
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元素,找到和傳進來的dom一樣的東西,然後把他的class設置為on,並且把相對應的div給顯示出來,其他的就全部把className設置為空,並且把對應的div給隱藏。
大概就是這樣。但是大家肯定就都發現了這樣的寫法的缺點,就是每個li都要設置一個onclick時間傳入它自己。這樣有點違反了結構與表現相分離的道理。所以我們就換種寫法
二,直接寫入鼠標事件方法
<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>
只是簡單的改動一下就可以了,因為在JS中有這些方法可以用比如onclick,onmouseover等等,但是用的時候我要先把所有的要用這個事件的元素都遍歷一下,如果那個被點擊就會傳入一個this,我們只需要像第一種方法一樣判斷一下list是不是和這個this相同,然後下面的操作和第一種方法一樣
(這樣兩種方法都是比較簡單的寫法,在JS裡還有一些比較高級復雜的寫法,但是用到的思想和這兩種寫法大多一樣。)
好了就到這裡,建議大家可以用這種方法寫一個圖片切換效果,我想應該很簡單吧

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved