js实现的切换面板实例代码

最近小菜鸟看了妙味课堂的射流研究…视频，学习了一点知识，在这里总结一下，代码写的有点臃肿，刚开始学，不知道咋着优化，看到的高手可以指点一下，呵呵，再此谢过，效果大概是在这样的

鼠标划过不同的题目会有不同的图片和解说，可以连接到不同的网站，分享一下我的代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。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 '！-* { margin :0；划水：0;} #容器{ height:auto宽度宽度：553pxborder:1px固体# CCC位置：相对；margin:100px auto} #内容高度：266像素宽度宽度：400像素位置：相对；背景技术# F00float:left} #内容p { color : # FFF；padding:10px高度：30 px宽度宽度：380像素位置：绝对；左转：0底部：0;} # content p : th-child(1){ z-index :2；} # content p : th-child(偶数){ background : # 000 opa city 33600.5 } # menu { height :160 px宽度宽度：153px右浮动：} #菜单ul {高度：100%；宽度：100%;} #菜单ul Li { text-align :居中；背景： # F6F 6位置：相对；列表式：无；显示：块；高度：65px宽度宽度：153px边框-底部：1px实心# CCC} #菜单ul Li :最后一个孩子{身高：68 pxborder:none} #菜单保险商实验所阿利{ text-摆设：无；color: # 000文本对齐：居中；线高：65 pxfont-size :16 px} #菜单ul阿利：悬停{ color : # F00} span { z-index :2高度：0;宽度： 0;边框颜色：透明# f6f6f6透明透明；边框宽度：33 px边框样式：实心；} .一{位置：绝对值；top : 0；左侧：-66px；} .两{位置：绝对值；左侧：-66px；top:0}。三{位置：绝对值；左侧：-66px；top:0}。四{位置：绝对值；边框宽度：34 px左侧：-68px；top :0 } img { border : none }-/style脚本类型=' text/JavaScript '窗口。onload=function(){ var obj=document。getelementbyid('菜单').getElementsByTagName(' Li ')；/*获取编号为菜单的容器中的所有里元素*/var con=文档。getelementbyid(' content ').getElementsByTagName(' img ')[0]；/*获取内容里面出现的第一个img对象*/var href=文档。getelementbyid(' content ').getElementsByTagName(' a ')[0]；var hrefLink=new Array(' http://www。百度。' com '，' http://微博。com/2622932383/profile？topnav=1wvr=5 '，' http://www.taobao.com '，' http://gogle。com。hk’)/*存所有连接的数组*/var单词=新数组('我的小破车','杂草丛生，是希望','小伙伴在张望','钢索通向远方');/*每张图片的解说词存放在数组里*/var pContent=document。getelementbyid(' content ').getElementsByTagName(' p ')[0]；/*获取存放解说词的p元素*/var I=0；for(I=0；iobj.length我。索引=我；我onmouseover=function(){ con . src=' images/photo '(这。索引1)' .jpg '；pcontent。innerhtml=word[this。索引]；href。href=hrefLink[this。索引]；} } }/脚本/头体div id='容器div id='内容p我的小破车/p p/p a href=' http://www .百度。com ' img src=' http : images/photo 1。jpg ' width=' 400 ' height=' 266 '/a/div div id=' menu ' ul lia href=' # '语文详解/aspan class=' one '/span/Li lia href=' # '数学详解/aspan=' two '/span/Li lia href=' # ' PHP进阶/aspan='三'/span/Li lia href=' # ' c恶补/aspan class=' four '/span/Li/ul/div div style=' clear : both；/div /div /body /html