1.改变图片
**css样式**
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#all ul li{
float: left;
display: inline-block;
background-color: #CCCCCC;
margin-right: 3px;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
}
#all ul li.change{
background-color: black;
color:white;
}
#pic{
width: 300px;
height: 200px;
clear: both;
border: 1px solid;
}
#img1{
display: block;
}
#img2,#img3,#img4{
display: none;
}
<body>
<div id="all">
<ul>
<li onmouseover="myfrist('img1')" name="a1" >牛奶</li>
<li onmouseover="myfrist('img2')" name="a1">蛋糕</li>
<li onmouseover="myfrist('img3')" name="a1">巧克力</li>
<li onmouseover="myfrist('img4')" name="a1">咖啡</li>
</ul>
</div>
<div id="pic">
<div id="img1" name="p1"><img src="img/fre_0.jpg" width="300" height="200"></div>
<div id="img2" name="p1"><img src="img/fre_1.jpg" width="300" height="200"></div>
<div id="img3" name="p1"><img src="img/fre_2.jpg" width="300" height="200"></div>
<div id="img4" name="p1"><img src="img/fre_3.jpg" width="300" height="200"></div>
</div>
</body>
**script样式**
function myfrist(ids){
var pics=document.getElementsByName("p1");
var list=document.getElementsByName("a1");
for(var i=0;i<pics.length;i++){
if(pics[i].id==ids){
pics[i].style.display="block";
list[i].className="change";
}else{
pics[i].style.display="none";
list[i].className="none";
}
}
}
2.改变内容
**css样式**
body{
margin:0;
}
.div_bg{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
width:169px;
height:290px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
td{
font-size:12px;
line-height:20px;
color: #414141;
}
.white{font-size:12px;
color:#FFFFFF;
padding-top:2px;
cursor:pointer;
}
.white:hover{font-size:12px;
color:#FFFFFF;
padding-top:2px;
cursor:pointer;
}
a {
color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(img/menu1.gif);
background-repeat:no-repeat;
height:23px;
width:47px;
text-align:center;}
.nobg{background-image:url(img/menu2.gif);
background-repeat:no-repeat;
height:23px;
width:47px;
text-align:center;
}
#myTable{
width:145px;
margin-left:auto;
margin-right:auto;
}
<body>
<div class="div_bg"><table id="myTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:50px;" colspan="3"></td>
</tr>
<tr>
<td id="bg1" class="bg" onmouseover="show('book1')" name="a1"><a class="white" >小说</a></td>
<td id="bg2" class="nobg" onmouseover="show('book2')" name="a1"><a class="white" >非小说</a></td>
<td id="bg3" class="nobg" onmouseover="show('book3')" name="a1"><a class="white" >少儿</a></td>
</tr>
<tr>
<td colspan="3" style="padding-top:10px; padding-left:5px; text-align:left;"><div id="book1" name="p1" style="display:block;">
<a href="#" target=_blank>1.时间旅行者的妻子</a><br>
<a href="#" target=_blank>2.女心理师(下)</a><br>
<a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
<a href="#" target=_blank>4.女心理师(上)</a><br>
<a href="#" target=_blank>5.小时候</a><br>
<a href="#" target=_blank>6.追风筝的人</a><br>
<a href="#" target=_blank>7.盗墓笔记2</a><br>
<a href="#" target=_blank>8.输赢</a>
</div>
<div id="book2" name="p1" style="display:none;">
<a href="#" target=_blank>1.人生若只如初见</a><br>
<a href="#" target=_blank>2.高效能人士的七个..</a><br>
<a href="#" target=_blank>3.求医不如求己</a><br>
<a href="#" target=_blank>4.人体使用手册</a><br>
<a href="#" target=_blank>5.孩子,把你的手给我</a><br>
<a href="#" target=_blank>6.别笑!我是英文单词书</a><br>
<a href="#" target=_blank>7.人体经络使用手册</a><br>
<a href="#" target=_blank>8.股市稳赚</a>
</div>
<div id="book3" name="p1" style="display:none;">
<a href="#" target=_blank>1.斯凯瑞金色童书·..</a><br>
<a href="#" target=_blank>2.哈利·波特与“混..</a><br>
<a href="#" target=_blank>3.不一样的卡梅拉(..</a><br>
<a href="#" target=_blank>4.它们是怎么来的</a><br>
<a href="#" target=_blank>5.五·三班的坏小子..</a><br>
<a href="#" target=_blank>6.男生日记</a><br>
<a href="#" target=_blank>7.哈利·波特与魔法石</a><br>
<a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
</div></td>
</tr>
</table>
</div>
</body>
**script样式**
function show(name){
var ps=document.getElementsByName("p1");
var ass=document.getElementsByName("a1");
for(var i=0;i<ps.length;i++){
if(ps[i].id==name){
ps[i].style.display="block";
ass[i].className="bg";
}else{
ps[i].style.display="none";
ass[i].className="nobg";
}
}
}