问个js也签切换的特效

<!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>
我想问的问题是用什么办法把html中的 onclick事件从html中分离出来啊都写在js中

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
    <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" >
                命运</a></li>
            <li id="tab2"><a href="#">
                运势</a></li>
            <li id="tab3"><a href="#">
                缘分</a></li>
            <li id="tab4"><a href="#">
                人生</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>
<script type='text/javascript'>
document.getElementById('tab1').firstChild.onclick = function(){switchTab('tab1','con1');this.blur();return false;}
document.getElementById('tab2').firstChild.onclick = function(){switchTab('tab2','con2');this.blur();return false;}
document.getElementById('tab3').firstChild.onclick = function(){switchTab('tab3','con3');this.blur();return false;}
document.getElementById('tab4').firstChild.onclick = function(){switchTab('tab4','con4');this.blur();return false;}
</script></html>
我是新手，能不能帮忙把它写成循环能做到吗？
就是for（）｛
    document.getElementById('tab4').firstChild.onclick = function(){switchTab('tab4','con4');this.blur();return false;}
｝
<script type='text/javascript'>
document.getElementById('tab1').firstChild.onclick = function(){switchTab('tab1','con1');this.blur();return false;}
document.getElementById('tab2').firstChild.onclick = function(){switchTab('tab2','con2');this.blur();return false;}
document.getElementById('tab3').firstChild.onclick = function(){switchTab('tab3','con3');this.blur();return false;}
document.getElementById('tab4').firstChild.onclick = function(){switchTab('tab4','con4');this.blur();return false;}
</script>