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