js實現(xiàn)的切換面板實例代碼

2024-05-06 15:46:38

字體：大中小

供稿：網(wǎng)友

切換面板具備功能：鼠標劃過不同的題目會有不同的圖片和解說，可以連接到不同的網(wǎng)站，實例代碼如下，感興趣的朋友可以參考下哈

最近小菜鳥看了妙味課堂的js視頻，學習了一點知識，在這里總結(jié)一下，代碼寫的有點臃腫，剛開始學，不知道咋著優(yōu)化，看到的高手可以指點一下，呵呵，再此謝過，
效果大概是在這樣的：

鼠標劃過不同的題目會有不同的圖片和解說，可以連接到不同的網(wǎng)站，
分享一下我的代碼：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
<script type="text/javascript">
window.onload=function(){
var obj=document.getElementById('menu').getElementsByTagName('li');/*獲取id為menu的容器中的所有l(wèi)i元素*/
var con=document.getElementById('content').getElementsByTagName('img')[0];/*獲取content里面出現(xiàn)的第一個img對象*/
var hreff=document.getElementById('content').getElementsByTagName('a')[0];
var hrefLink=new Array('http://www.baidu.com','http://weibo.com/2622932383/profile?topnav=1&wvr=5','http://www.taobao.com','http://google.com.hk')/*存所有連接的數(shù)組*/
var words=new Array('我的小破車','雜草叢生，是希望','小伙伴在張望','鋼索通向遠方');/*每張圖片的解說詞存放在數(shù)組里*/
var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*獲取存放解說詞的p元素*/
var i=0;
for(i=0;i<obj.length;i++)
{
obj[i].index=i;
obj[i].onmouseover=function(){
con.src='images/photo'+(this.index+1)+'.jpg';
pContent.innerHTML=words[this.index];
hreff.href=hrefLink[this.index];
}
}
}
</script>
</head>
<body>
<div>
<div>
<p>我的小破車</p>
<p></p>
<a ><img src="images/photo1.jpg"/></a></div>
<div>
<ul>
<li><a href="#">語文詳解</a><span></span></li>
<li><a href="#">數(shù)學詳解</a><span></span></li>
<li><a href="#">php進階</a><span></span></li>
<li><a href="#">c++惡補</a><span></span></li>
</ul>
</div>
<div></div>
</div>
</body>
</html>