JavaScript - Tab切换效果

浏览数：20 / 时间：2015年06月08日

简单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>

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">
    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>