当移动到菜单“小说”，“非小说”，“少儿”时菜单背景变换，并显示相应内容：
<!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>tab切换</title><style type="text/CSS">.img{ background:url(images/menu2.gif); margin-left:2px; width:47px; height:23px; float:left; font-size:14px; text-align:center; color:#FFF }ol{font-size:14px; color:#39F; line-height:20px} </style></head><body><div style="background:url(images/bg.jpg) ;width:170px; height:290px; float:left"><div style="margin-top:50px;margin-left:10px; float:left"> <!--导航栏头目--><div class="img" id="id1" onmouSEOver="show1()" onmouseout="out()">小说</div><div class="img" id="id2" onmouseover="show2()" onmouseout="out()">非小说</div><div class="img" id="id3" onmouseover="show3()" onmouseout="out()">少儿</div><div> <!--小说列目开始--><ol style="margin-left:-10px;margin-top:20px; float:left; display:none" id="show1" ><li>时间旅行者的妻子</li><li>女心理师（下）</li><li>鬼吹灯之精绝古城</li><li>女心理师（上）</li><li>小时候</li><li>追风筝的人</li><li>盗墓笔记2</li><li>输赢</li></ol> <!--小说列目结束--> <!--非小说列目开始--><ol style="margin-left:-10px;margin-top:20px; float:left; display:none " id="show2"><li>人生若只如初见</li><li>高效能人士的七个</li><li>求医不如求己</li><li>人体使用手册</li><li>孩子，把你的手给我</li><li>别笑！我是英文单词书</li><li>人体经络使用手册</li><li>股市稳赚</li></li></ol> <!--非小说列目结束--> <!--少儿列目开始--><ol style="margin-left:-10px;margin-top:20px; float:left; display:none " id="show3"><li>斯凯瑞金色童书</li><li>哈利。波特</li><li>不一样的卡梅拉</li><li>他们是怎么来的</li><li>五。三班的坏小子</li><li>男生日记</li><li>哈利波特与魔法石</li><li>噼里啪啦丛书</li></ol> <!--少儿列目结束--></div></div></body><script> //定义小说函数方法function show1(){ var id1=document.getElementById("id1"); id1.style.background="url(images/menu1.gif)" var show1=document.getElementById("show1"); show1.style.display="block"; } //定义非小说函数方法function show2(){ var id2=document.getElementById("id2"); id2.style.background="url(images/menu1.gif)" var show2=document.getElementById("show2"); show2.style.display="block"; } //定义少儿函数方法function show3(){ var id3=document.getElementById("id3"); id3.style.background="url(images/menu1.gif)" var show3=document.getElementById("show3"); show3.style.display="block"; } //定义鼠标移动函数方法function out(){ var id=document.getElementById("id1"); id.style.background="url(images/menu2.gif)" var show1=document.getElementById("show1"); show1.style.display="none"; var id2=document.getElementById("id2"); id2.style.background="url(images/menu2.gif)" var show2=document.getElementById("show2"); show2.style.display="none"; var id3=document.getElementById("id3"); id3.style.background="url(images/menu2.gif)" var show3=document.getElementById("show3"); show3.style.display="none"; } </script></html>
新闻热点
疑难解答
