TAB切换效果

最新推荐文章于 2024-09-19 11:17:39 发布

weixin_30617797

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/914556495wxkj/p/3426682.html

版权

<title>TAB切换效果</title>
<script type="text/javascript">
function change(ss){
    if(ss=="top1"){
        document.getElementById("left1").style.display="block";
        document.getElementById("left2").style.display="none";
        document.getElementById("right1").style.display="block";
        document.getElementById("right2").style.display="none";
        document.getElementById("end1").style.display="block";
        document.getElementById("end2").style.display="none";
        }
else{
        document.getElementById("left1").style.display="none";
        document.getElementById("left2").style.display="block";
        document.getElementById("right1").style.display="none";
        document.getElementById("right2").style.display="block";
        document.getElementById("end1").style.display="none";
        document.getElementById("end2").style.display="block";    
    }
}
</script>
<style type="text/css">
img{border:0;}
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/left1.jpg" alt="笔记本" id="left1"/><img src="images/left2.jpg" alt="笔记本" id="left2" οnmοuseοver="change('top1')" style="display:none;"/></td>
     <td><img src="images/right1.jpg" alt="手机充值" id="right1" οnmοuseοver="change('top2')"/><img src="images/right2.jpg" alt="手机充值" id="right2" style="display:none;" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/end1.jpg" alt="笔记本" id="end1" /><img src="images/end2.jpg" alt="手机充值" id="end2" style="display:none;"/></td>
  </tr>
</table>

</body>