午夜国产狂喷潮在线观看|国产AⅤ精品一区二区久久|中文字幕AV中文字幕|国产看片高清在线





    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    js實現(xiàn)簡單的可切換選項卡效果
    
            
    來源：易賢網(wǎng)  閱讀：2410 次  日期：2015-04-13 13:46:35 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“js實現(xiàn)簡單的可切換選項卡效果”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    如圖，最簡單的純粹的選項卡
    js實現(xiàn)簡單的可切換選項卡效果 三聯(lián)
    

    名單
    

    第一步，當然是先寫html代碼和css樣式
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>無標題文檔</title>
    <style>
    body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
    ul,li{list-style:none;}
    .wrap{width:500px; margin:20px auto;}
    .hide{display:none;}
    #tab_t{height:25px;border-bottom:1px solid #ccc;}
    #tab_t li{float:left; width:80px; height:24px;
    line-height:24px; margin:0 4px; text-align:center;
    border:1px solid #ccc; border-bottom:none;
    background:#f5f5f5; cursor:pointer}
    #tab_t .act{ position:relative; height:25px;
    margin-bottom:-1px; background:#fff;}
    #tab_c{border:1px solid #ccc;
    border-top:none; padding:20px;}
    </style>
    </head>
    <body>
    <div class="wrap">
    <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
    </ul>
    <div id="tab_c">
    <div>內(nèi)容1</div>
    <div class="hide">內(nèi)容2</div>
    <div class="hide">內(nèi)容3</div>
    <div class="hide">內(nèi)容4</div>
    </div>
    </div>
    </body>
    </html>
    第二步，實現(xiàn)簡單的切換效果
    要點1：
    abc.document.getElementsByTagName("li")
    取得abc下面的所有標簽為li的元素，返回的是一個元素集合，有數(shù)組的一些屬性。
    要點2：循環(huán)，先循環(huán)給li加上onclick事件，再onlink事件點擊的時候，再循環(huán)讓所有選項卡的act樣式去掉，所有的內(nèi)容隱藏。然后讓所點擊的選項及對應內(nèi)容顯示。
    要點3：
    1
    tab_t_li[i].index = i;
    在循環(huán)時，給選項卡加一個額外的屬性并賦值，以做選項卡和內(nèi)容的對應。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>無標題文檔</title>
    <style>
    body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
    ul,li{list-style:none;}
    .wrap{width:500px; margin:20px auto;}
    .hide{display:none;}
    #tab_t{
    height:25px;
    border-bottom:1px solid #ccc;
    }
    #tab_t li{
    float:left;
    width:80px;
    height:24px;
    line-height:24px;
    margin:0 4px;
    text-align:center;
    border:1px solid #ccc;
    border-bottom:none;
    background:#f5f5f5;
    cursor:pointer
    }
    #tab_t .act{
    position:relative;
    height:25px;
    margin-bottom:-1px;
    background:#fff;
    }
    #tab_c{
    border:1px solid #ccc;
    border-top:none;
    padding:20px;
    }
    </style>
    <script>
    window.onload = function(){
    var tab_t = document.getElementById("tab_t");
    var tab_t_li = tab_t.getElementsByTagName("li");
    var tab_c = document.getElementById("tab_c");
    var tab_c_li = tab_c.getElementsByTagName("div");
    var len = tab_t_li.length;
    var i=0;
    for(i=0; i<len; i++){
    tab_t_li[i].index = i;
    tab_t_li[i].onclick = function(){
    for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="wrap">
    <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
    </ul>
    <div id="tab_c">
    <div>內(nèi)容1</div>
    <div class="hide">內(nèi)容2</div>
    <div class="hide">內(nèi)容3</div>
    <div class="hide">內(nèi)容4</div>
    </div>
    </div>
    </body>
    </html>
    第三步，寫成函數(shù)。上面的寫法只能一個頁面用一個選項卡，如果再加一個的話，就需要復制一份，再改很多變量名。
    要點：tab_t_li[i][evt] 因為傳值的時候是字符串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執(zhí)行不了的，tab_t_li["onclick"]這樣執(zhí)行沒問題。
    好了，現(xiàn)在一個頁面上就可以有多個切換了，只需要調(diào)用函數(shù)的時候，寫上相應的id名和標簽名，事件名稱就可以了
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>無標題文檔</title>
    <style>
    body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
    ul,li{list-style:none;}
    .wrap{width:500px; margin:20px auto;}
    .hide{display:none;}
    #tab_t{
    height:25px;
    border-bottom:1px solid #ccc;
    }
    #tab_t li{
    float:left;
    width:80px;
    height:24px;
    line-height:24px;
    margin:0 4px;
    text-align:center;
    border:1px solid #ccc;
    border-bottom:none;
    background:#f5f5f5;
    cursor:pointer
    }
    #tab_t .act{
    position:relative;
    height:25px;
    margin-bottom:-1px;
    background:#fff;
    }
    #tab_c{
    border:1px solid #ccc;
    border-top:none;
    padding:20px;
    }
    </style>
    <script>
    window.onload = function(){
    tab("tab_t","li","tab_c","div","onmouseover")
    function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
    var tab_t = document.getElementById(tab_t);
    var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
    var tab_c = document.getElementById(tab_c);
    var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
    var len = tab_t_li.length;
    var i=0;
    for(i=0; i<len; i++){
    tab_t_li[i].index = i;
    tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="wrap">
    <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
    </ul>
    <div id="tab_c">
    <div>內(nèi)容1</div>
    <div class="hide">內(nèi)容2</div>
    <div class="hide">內(nèi)容3</div>
    <div class="hide">內(nèi)容4</div>
    </div>
    </div>
    </body>
    </html>
    

    更多信息請查看IT技術專欄
                
    
            
    
                        
    
            
    更多信息請查看腳本欄目
    
            
    
            
            
            
            
    易賢網(wǎng)手機網(wǎng)站地址：js實現(xiàn)簡單的可切換選項卡效果
    
            
    
    
    
    
        

					
		
    
		
    
            
    
                
    2025國考·省考課程試聽報名
    
                
      

                    
    • 
                        報班類型
                        
                    
      • 
                    
    • 
                        姓名
                        
                    
      • 
                    
    • 
                        手機號
                        
                    
      • 
                    
    • 
                        驗證碼
                        
                        
                    
      • 
                    
    • 
                        
						
                        
                    
      • 
                
    
            
    
        
    
		
    
        

        
    
    
    
    
    

    

    

    


    
    關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡要咨詢 | 簡要咨詢須知 |  新媒體/短視頻平臺 | 手機站點  | 投訴建議 

    

    
     工業(yè)和信息化部備案號：滇ICP備2023014141號-1
    云南省教育廳備案號：云教ICP備0901021
    滇公網(wǎng)安備53010202001879號 
    人力資源服務許可證：（云）人服證字（2023）第0102001523號

    

    
    
    
    
        聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx 
    
    咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網(wǎng)