当移动到菜单“小说”，“非小说”，“少儿”时菜单背景变换，并显示相应内容：
<!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; 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) ;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>
