这个选项卡哪里出错了??求高手解决.

鼠标点击到第三个链接然后在往回点击第一个链接就出错了.第三个不会display:none;
这是怎么回事啊
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
    *{margin:0;padding:0;}
    ul,ol{list-style:none outside none;}
    .tab{width:960px;height:346px;background:url(images/xh_img_10.jpg) no-repeat;}
    .tab_1{padding:20px 0 0 80px;}
    .tab_1 ul li{float:left;background:url(images/xh_4.png) no-repeat;width:152px;height:155px;margin-left:20px;margin-top:20px;font-size:14px;text-align:center;display:inline;}
    .tab_1 ul li img{margin:15px 0 30px 0;}
    .tab_1 ul li p{line-height:20px;}
    .none{display:none;}
    .tab_1 .nav{width:960px;position:relative;}
    .tab_1 .nav a{width:80px;height:35px;background:orange;display:block;position:absolute;top:30px;left:50px;}
    .tab_1 .nav .e{position:absolute;top:0px;left:350px;}
    .tab_1 .nav .q{position:absolute;top:0px;left:510px;}
</style><script type="text/javascript">
    function change(k){
        for(var j=0; j<k; j++){
            var m = j+1;
            if(k == m){
                document.getElementById("tab_"+m).style.display = "block";
            }
            else{
                document.getElementById("tab_"+m).style.display = "none";
            }
        }
    }
</script>
</head><body>
    <div class="tab">
        
        <div id="tab_1" class="tab_1">
            <div class="nav">
                <img src="images/xh_img_12.jpg" />
                <div class="r"><a href="#" onclick="change(1)"></a></div>
                <div class="e"><a href="#" onclick="change(2)"></a></div>
                <div class="q"><a href="#" onclick="change(3)"></a></div>                
            </div>
            <ul>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
            </ul>
        </div>
        <div id="tab_2" class="tab_1" style="display:none;">
            <div class="nav">
                <img src="images/xh_img_13.jpg" />
                <div class="r"><a href="#" onclick="change(1)"></a></div>
                <div class="e"><a href="#" onclick="change(2)"></a></div>
                <div class="q"><a href="#" onclick="change(3)"></a></div>
            </div>
            <ul>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
            </ul>
        </div>
        <div id="tab_3" class="tab_1" style="display:none;">
            <div class="nav">
                <img src="images/xh_img_14.jpg" />
                <div class="r"><a href="#" onclick="change(1)"></a></div>
                <div class="e"><a href="#" onclick="change(2)"></a></div>
                <div class="q"><a href="#" onclick="change(3)"></a></div>
            </div>
            <ul>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
                <li><img src="images/xh_img_15.jpg" /><p>跑出神话</p><p>叮当猫</p></li>
            </ul>
        </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        ul,ol{list-style:none outside none;}
        .tab{width:960px;height:346px;background:url(images/xh_img_10.jpg) no-repeat;}
        .tab_1{padding:20px 0 0 80px;}
        .tab_1 ul li{float:left;background:url(images/xh_4.png) no-repeat;width:152px;height:155px;margin-left:20px;margin-top:20px;font-size:14px;text-align:center;display:inline;}
        .tab_1 ul li img{margin:15px 0 30px 0;}
        .tab_1 ul li p{line-height:20px;}
        .none{display:none;}
        .tab_1 .nav{width:960px;position:relative;}
        .tab_1 .nav a{width:80px;height:35px;background:orange;display:block;position:absolute;top:30px;left:50px;}
        .tab_1 .nav .e{position:absolute;top:0px;left:350px;}
        .tab_1 .nav .q{position:absolute;top:0px;left:510px;}
    </style><script type="text/javascript">
        function change(k){
            for(var j=1; j<=3; j++){
        document.getElementById("tab_"+j).style.display = "none";
                /*var m = j+1;
                if(k == m){
                    document.getElementById("tab_"+m).style.display = "block";
                }
                else{
                    document.getElementById("tab_"+m).style.display = "none";
                }*/
            }
    document.getElementById("tab_"+k).style.display = "block";
        }
    </script>
    </head><body>
        <div class="tab">
            
            <div id="tab_1" class="tab_1">
                <div class="nav">
                    <img src="images/xh_img_12.jpg" />
                    <div class="r"><a href="#" onclick="change(1)"></a></div>
                    <div class="e"><a href="#" onclick="change(2)"></a></div>
                    <div class="q"><a href="#" onclick="change(3)"></a></div>                
                </div>
                <ul>
                    <li><img src="images/xh_img_15.jpg" /><p>11跑出神话</p><p>1叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>1跑出神话</p><p>1叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>1跑出神话</p><p>1叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>1跑出神话</p><p>1叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>1跑出神话</p><p>1叮当猫</p></li>
                </ul>
            </div>
            <div id="tab_2" class="tab_1" style="display:none;">
                <div class="nav">
                    <img src="images/xh_img_13.jpg" />
                    <div class="r"><a href="#" onclick="change(1)"></a></div>
                    <div class="e"><a href="#" onclick="change(2)"></a></div>
                    <div class="q"><a href="#" onclick="change(3)"></a></div>
                </div>
                <ul>
                    <li><img src="images/xh_img_15.jpg" /><p>2跑出神话</p><p>2叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>2跑出神话</p><p>2叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>2跑出神话</p><p>2叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>2跑出神话</p><p>2叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>2跑出神话</p><p>2叮当猫</p></li>
                </ul>
            </div>
            <div id="tab_3" class="tab_1" style="display:none;">
                <div class="nav">
                    <img src="images/xh_img_14.jpg" />
                    <div class="r"><a href="#" onclick="change(1)"></a></div>
                    <div class="e"><a href="#" onclick="change(2)"></a></div>
                    <div class="q"><a href="#" onclick="change(3)"></a></div>
                </div>
                <ul>
                    <li><img src="images/xh_img_15.jpg" /><p>3跑出神话</p><p>3叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>3跑出神话</p><p>3叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>3跑出神话</p><p>3叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>3跑出神话</p><p>3叮当猫</p></li>
                    <li><img src="images/xh_img_15.jpg" /><p>3跑出神话</p><p>3叮当猫</p></li>
                </ul>
            </div>
        </div>
    </body>
    </html>
      

  2.   


    <script type="text/javascript">
        function change(k){
            for(var j=1; j<=3; j++){
                document.getElementById("tab_"+j).style.display = "none";
                /*var m = j+1;
                if(k == m){
                    document.getElementById("tab_"+m).style.display = "block";
                }
                else{
                    document.getElementById("tab_"+m).style.display = "none";
                }*/
            }
            document.getElementById("tab_"+k).style.display = "block";
        }
    </script>正解