天天看點

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