JS实现选项卡之间的切换

JS实现选项卡之间的切换，理论就不多说，直接看代码：

HTML：

<div style=".......">
    <ul class="tab_ul" id="detailNav">
        <li id="supporterBtn1"  onClick="setTab('supporterBtn',1,3)" class="bg_write">项目主页</li>
        <li id="supporterBtn2"  onClick="setTab('supporterBtn',2,3)" >支持者 <span class="r_bg">111</span></li>
        <li id="supporterBtn3"  onClick="setTab('supporterBtn',3,3)" >项目详情</li>
    </ul>
    
    <!-- 项目主页 -->
    <div id="supporterBtn_1" style="display: block" class="tab_cont">
        中间内容就省略了。
    </div>


    <!-- 支持者 -->
    <div id="supporterBtn_2" style="display: none" class="tab_cont clearfix">
       中间内容就省略了。
    </div>

    <!-- 项目详情 -->
    <div id="supporterBtn_3" style="display: none">
        中间内容就省略了。
    </div>
</div>

JS：

<script type="text/javascript">
            function setTab(name,cursel,n){
                for(i=1;i<=n;i++){
                    var menu=document.getElementById(name+i);
                    var con=document.getElementById(name+"_"+i);
                    if(i==cursel&&menu.className==""){
                        menu.className="bg_write";
                        con.style.display="block";
                    }else{
                        menu.className="";
                        con.style.display="none";
                    }
                }
            }

</script>