茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
    • 

    <sub id="ddbnn"><ol id="ddbnn"></ol></sub>
  • 

    <legend id="ddbnn"></legend><s id="ddbnn"></s>
    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    jQuery實現(xiàn)TAB選項卡切換特效簡單演示
    
            
    來源：易賢網(wǎng)  閱讀：1173 次  日期：2016-08-02 15:53:08 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“jQuery實現(xiàn)TAB選項卡切換特效簡單演示”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    本文實例為大家分享jQuery實現(xiàn)TAB選項卡切換特效，供大家參考，具體內(nèi)容如下
    

    1、tab切換 on
    

    <!DOCTYPE html>
    

    <html lang="en">
    

    <head>
    

      <meta charset="UTF-8">
    

      <title>jQuery tab切換</title>
    

      <style type="text/css">
    

        *{
    

          margin:0;
    

          padding:0;
    

        }
    

        .wrap{
    

          margin-left: 50px;
    

          margin-top: 50px;
    

        }
    

        /*清浮動---clearfix*/
    

        .clearfix {
    

          *zoom: 1;
    

        }
    

        .clearfix:after {
    

          content: "";
    

          clear: both;
    

          display: block;
    

          height: 0;
    

          font-size: 0;
    

          visibility: hidden;
    

        }
    

        .blist {
    

          border:1px solid #d9d9d9;
    

          width: 275px;
    

          height: 32px;
    

        }
    

        .blist li:first-child{
    

          border-left: none;
    

        }
    

        .blist li{
    

           list-style: none;
    

           width: 68px;
    

           height: 32px;
    

           border-left:1px solid #d9d9d9;
    

           font-size: 14px;
    

           font-family: "楷體";
    

           line-height: 32px;
    

           text-align: center;
    

           float: left;
    

           /*鼠標樣式改變?yōu)橐粋€手*/
    

           cursor: pointer;
    

           /*字體免選中*/
    

           -webkit-user-select: none;
    

        }
    

        .blsit-list{
    

          width: 275px;
    

        }
    

        .blsit-list li{
    

           list-style: none;
    

           width: 275px;
    

           border:1px solid #ccc;
    

           height: 200px;
    

           border-top: none;
    

        }
    

        .wrap .blist li.active{
    

          font-weight: bold;
    

          color: red;
    

          border-top: 2px solid red;
    

          position: relative;
    

          top:-1px;
    

          height: 31px;
    

        }
    

        .blsit-list li:first-child{
    

          display: block;
    

        }
    

        .blsit-list li{
    

         display: none;
    

        }
    

      </style>
    

    </head>
    

    <body>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    

        <script type="text/javascript">
    

        $(function(){
    

           $(".blist").on("click","li",function(){
    

             // 設index為當前點擊
    

             var index = $(this).index();
    

             // 點擊添加樣式利用siblings清除其他兄弟節(jié)點樣式
    

             $(this).addClass("active").siblings().removeClass("active");
    

             // 同理顯示與隱藏
    

             $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
    

           })
    

        })
    

        </script>
    

    </body>
    

    </html>
    

    2、tab切換 mouseenter
    

    <!DOCTYPE html>
    

    <html lang="en">
    

    <head>
    

      <meta charset="UTF-8">
    

      <title>jQuery tab切換</title>
    

      <style type="text/css">
    

        *{
    

          margin:0;
    

          padding:0;
    

        }
    

        .wrap{
    

          margin-left: 50px;
    

          margin-top: 50px;
    

        }
    

        /*清浮動---clearfix*/
    

        .clearfix {
    

          *zoom: 1;
    

        }
    

        .clearfix:after {
    

          content: "";
    

          clear: both;
    

          display: block;
    

          height: 0;
    

          font-size: 0;
    

          visibility: hidden;
    

        }
    

        .blist {
    

          border:1px solid #d9d9d9;
    

          width: 275px;
    

          height: 32px;
    

        }
    

        .blist li:first-child{
    

          border-left: none;
    

        }
    

        .blist li{
    

           list-style: none;
    

           width: 68px;
    

           height: 32px;
    

           border-left:1px solid #d9d9d9;
    

           font-size: 14px;
    

           font-family: "楷體";
    

           line-height: 32px;
    

           text-align: center;
    

           float: left;
    

           /*鼠標樣式改變?yōu)橐粋€手*/
    

           cursor: pointer;
    

           /*字體免選中*/
    

           -webkit-user-select: none;
    

        }
    

        .blsit-list{
    

          width: 275px;
    

        }
    

        .blsit-list li{
    

           list-style: none;
    

           width: 275px;
    

           border:1px solid #ccc;
    

           height: 200px;
    

           border-top: none;
    

        }
    

        .wrap .blist li.active{
    

          font-weight: bold;
    

          color: red;
    

          border-top: 2px solid red;
    

          position: relative;
    

          top:-1px;
    

          height: 31px;
    

        }
    

        .blsit-list li:first-child{
    

          display: block;
    

        }
    

        .blsit-list li{
    

         display: none;
    

        }
    

      </style>
    

    </head>
    

    <body>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <div class="wrap">
    

           <ul class="blist clearfix">
    

             <li class="active">電影</li>
    

             <li>電腦</li>
    

             <li>冰箱</li>
    

             <li>空調</li>
    

           </ul>
    

           <ul class="blsit-list">
    

             <li>A</li>
    

             <li>B</li>
    

             <li>C</li>
    

             <li>D</li>
    

           </ul>
    

        </div>
    

        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    

        <script type="text/javascript">
    

        $(function(){
    

           $(".blist li").on("mouseenter",function(){
    

             var index = $(this).index();
    

             $(this).addClass("active").siblings().removeClass("active"); 
    

             $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
    

           })
    

        })
    

        </script>
    

    </body>
    

    </html>
    

    以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
                
    
            
    
                        
    
            
    更多信息請查看網(wǎng)絡編程
    
            
    
            
            
            
            
    易賢網(wǎng)手機網(wǎng)站地址：jQuery實現(xiàn)TAB選項卡切換特效簡單演示
    
            
    
    
    
    
        

					
		
    
		
    
            
    
                
    2026上岸·考公考編培訓報班
    
                
      

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

        
    
    
    
    
    

    

    

    


    
    關于我們 | 聯(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)