js小技巧：tab页切换

依旧只是贴在这里备份，方便以后粘贴复制，高手绕过，以免浪费时间:)

<!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>
    <title>tab页切换</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        function switchTab(ProTag, ProBox) {
            for (i = 1; i < 5; i++) {
                if ("tab" + i == ProTag) {
                    document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
                } else {
                    document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
                }
                if ("con" + i == ProBox) {
                    document.getElementById(ProBox).style.display = "";
                } else {
                    document.getElementById("con" + i).style.display = "none";
                }
            }
        }
    </script>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
            line-height: 25px;
            font-size: 12px;
            list-style:none;
        }
        #tabContainer
        {
            margin: 30px;
        }
        #tabContainer li
        {
            float: left;
            width: 80px;
            margin: 0 3px;
            background: #efefef;
            text-align: center;
        }
        #tabContainer a
        {
            display: block;
        }
        #tabContainer a.on
        {
            background: pink;
        }
    </style>
</head>
<body>
    <div id="tabContainer">
        <ul>
            <li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">
                命运</a></li>
            <li id="tab2"><a href="#" onclick="switchTab('tab2','con2');this.blur();return false;">
                运势</a></li>
            <li id="tab3"><a href="#" onclick="switchTab('tab3','con3');this.blur();return false;">
                缘分</a></li>
            <li id="tab4"><a href="#" onclick="switchTab('tab4','con4');this.blur();return false;">
                人生</a></li>
        </ul>
        <div style="clear: both">
        </div>
        <div id="con1">
            命运是个神马玩意儿...
        </div>
        <div id="con2" style="display: none">
            霉运也是一种运气...
        </div>
        <div id="con3" style="display: none">
            缘份纯粹是蒙人的东西...
        </div>
        <div id="con4" style="display: none">
            人生就是人"生"出来之后的过程...
        </div>
    </div>
</body>
</html>

 (注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

posted @ 2010-06-07 11:19  菩提树下的杨过  阅读(19718)  评论(0)  编辑  收藏  举报