你的位置:首页 > Java教程

[Java教程]实现三联tab切换特效


当移动到菜单“小说”,“非小说”,“少儿”时菜单背景变换,并显示相应内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html .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 ><div >     <!--导航栏头目--><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 id="show1" ><li>时间旅行者的妻子</li><li>女心理师(下)</li><li>鬼吹灯之精绝古城</li><li>女心理师(上)</li><li>小时候</li><li>追风筝的人</li><li>盗墓笔记2</li><li>输赢</li></ol>            <!--小说列目结束-->           <!--非小说列目开始--><ol id="show2"><li>人生若只如初见</li><li>高效能人士的七个</li><li>求医不如求己</li><li>人体使用手册</li><li>孩子,把你的手给我</li><li>别笑!我是英文单词书</li><li>人体经络使用手册</li><li>股市稳赚</li></li></ol>       <!--非小说列目结束-->       <!--少儿列目开始--><ol 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>