首頁  >  文章  >  web前端  >  透過onmouseover選項卡實現img圖片的變化_javascript技巧

透過onmouseover選項卡實現img圖片的變化_javascript技巧

WBOY
WBOY原創
2016-05-16 17:00:241475瀏覽
複製代碼如下代碼:

渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>
標籤實作img圖片的轉換

#main{ 高度:420px;寬度:400px;}
#head{
寬度:400px;
高度:52px;
位置:絕對;
左:10px;
頂部:-12px;
背景顏色:綠色;
}
#head li{ float:left;列表樣式:無;寬度:85px;}
#content{
寬度:400px;
高度:350px;
背景顏色:#FC6;
文字對齊:居中;
位置:位置:絕對;
上:36px;
左:10px;
}
風格>
頭>





透過onmouseover選項卡實現img圖片的變化_javascript技巧


透過onmouseover選項卡實現img圖片的變化_javascript技巧


透過onmouseover選項卡實現img圖片的變化_javascript技巧




身體>

function show(n){
for(var i=1;idocument.getElementById("tab" i).style.backgroundColor='green';
document.getElementById("p" i).style.display='none';
//顯示隱藏內容的與否的控制,當為none時,隱藏
}
document.getElementById("tab" n).style.backgroundColor='white';
document.getElementById("p" n).style.display='block';
//當隱藏時,的即可顯示
}
;

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn