标签：javascript tab 切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab切换效果</title>
<style type="text/css">
.hidden{
display:none;
}
</style>
<script type="text/javascript">
function show(flag){
if(flag=="right"){
$("left1").style.display="none";
$("left2").style.display="block";
$("right1").style.display="none";
$("right2").style.display="block";
$("end1").style.display="none";
$("end2").style.display="block";
}else{
$("left1").style.display="block";
$("left2").style.display="none";
$("right1").style.display="block";
$("right2").style.display="none";
$("end1").style.display="block";
$("end2").style.display="none";
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/left1.jpg" id="left1"/>
<img src="images/left2.jpg" id="left2" class="hidden" onmouseover="show(‘left‘)"/>
</td>
<td>
<img src="images/right1.jpg" id="right1" onmouseover="show(‘right‘)"/>
<img src="images/right2.jpg" id="right2" class="hidden" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/end1.jpg" id="end1" />
<img src="images/end2.jpg" id="end2" class="hidden"/>
</td>
</tr>
</table>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab页面的切换</title>
<style type="text/css">
body{
background:pink;
}
.border{
border-top: 1px solid #F00;
border-right:2px dashed #00f;
}
li{
list-style: none;
float: left;
font-size:15px;
background: url(images/bg1.gif) no-repeat;
width:105px;
height:33px;
text-align: center;
line-height: 36px;
color:white;
font-family:楷体;
}
ul{
width:1000px;
margin:0 auto;
}
.over{
background:url(images/bg2.gif) no-repeat;
}
.out{
background: url(images/bg1.gif) no-repeat;
}
</style>
<script type="text/javascript">
function change(){
$("shop").className="border";
}
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.className="over";
};
lis[i].onmouseout=function(){
this.className="out";
};
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<img src="images/shop.gif" id="shop"/>
<input type="button" value="通过JavaScript改变样式" onclick="change()" />
<hr/>
<ul>
<li>市场营销</li>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
</body>
</html>标签：javascript tab 切换效果
原文地址：http://blog.csdn.net/wangzi11322/article/details/45285623
