Jquery結合CSS實現選項卡功能

時間 2019-11-06

標籤 jquery 結合 css 實現選項功能欄目 JQuery 简体版

原文原文鏈接

先看效果圖：javascript

如今就讓咱們看看實現的過程，首先看看 html 代碼：css

<div id="category" class="category boxshadow">
    <ul class="nav">
        <li>
            <a id="nvajquery" class="current" href="#jquery">jQuery</a>
        </li>
        <li>
            <a id="nvacss" href="#css">Css</a>
        </li>
    </ul>
    <div id="category-list">
        <ul id="jquery" class="nav-list">
            <li>
                <a href="">jQuery學習大總結(二)jQuery選擇器完整介紹</a>
            </li>
            <li>
                <a href="">jQuery對元素進行拖動並從新排序</a>
            </li>
        </ul>
        <ul id="css" class="nav-list" style="display:none;">
            <li>
                <a href="">css遮罩代碼</a>
            </li>
        </ul>
    </div>
</div>
咱們的目標很明確，當點擊 class 名爲"nav" 的無序列表中的標籤時，根據錨的值顯示 class 名爲 "nav-list" 中的內容，切換效果爲本篇的重點：jQuery 滑動切換效果。html

通過對樣式的一番調整，最終以下：java

 
       .category { 
      
 
            
       width 
       : 
       336px 
       ; 
      
 
            
       background 
       :  
       none  
       repeat  
       scroll  
       0  
       0  
       #EEEEEE 
       ; 
      
 
            
       margin-bottom 
       :  
       6px 
       ; 
      
 
            
       overflow 
       :  
       hidden 
       ; 
      
 
            
       text-align 
       :  
       center 
       ; 
      
 
       } 
      
 
       .nav{ 
      
 
            
       border-bottom 
       : 
       1px  
       solid  
       #666 
       ; 
      
 
            
       background 
       : 
       #50A3E5  
       none  
       repeat  
       scroll  
       0  
       0 
       ; 
      
 
            
       line-height 
       : 
       30px 
      
 
       } 
      
 
             
      
 
       .nav li a{ 
       color 
       : 
       #FFF 
       ; 
       padding 
       : 
       5px  
       40px 
       ; 
       text-decoration 
       :  
       none 
       ;} 
      
 
       .nav li a:hover{ 
       background-color 
       : 
       #3991D6 
       } 
      
 
       .current{ 
       background-color 
       : 
       #74B8ED 
       } 
      

          
      
 
       .category .nav li{ 
       display 
       : 
       inline 
       } 
      
 
       #category-list{ 
       display 
       : 
       block 
       } 
      
 
       .nav-list li{ 
       line-height 
       : 
       28px 
       } 
      
 
       .nav-list li a{ 
      
 
            
       display 
       : 
       block 
       ; 
      
 
            
       border-bottom 
       : 
       1px  
       solid  
       #d3d3d3 
       ; 
      
 
            
       color 
       :Black; 
      
 
            
       font-size 
       : 
       14px 
       ; 
      
 
            
       padding 
       : 
       3px 
       ; 
      
 
            
       text-align 
       : 
       left 
       ; 
      
 
            
       text-decoration 
       :  
       none 
       ; 
      
 
       } 
      
 
       .nav-list li a:hover{ 
      
 
            
       background-color 
       : 
       #50A3E5 
       ; 
      
 
            
       color 
       : 
       #FFF 
      
 
       } 
      

.nav-list li:last-child a{border-bottom:0}
li:last-child{border-bottom:none;} 中咱們使用了 "last-child" 選擇器去除最後一個 li 的下邊框，這裏須要注意的是在 IE6 下這個選擇器是無效的。固然，在這裏 IE6下即便有下邊框也沒關係，jQuery學習站也再也不考慮 IE6 的兼容問題。

接下來，咱們編寫 jQuery 代碼來完成滑動效果，首先引入 jQuery 文件，以下：jquery

 
       <script type= 
       "text/javascript" 
       > 
      
       $(document).ready( 
       function 
       () { 
      
       //a標籤點擊事件 
      
       $( 
       ".nav a" 
       ).click( 
       function 
       () { 
      
       //保存選擇器 
      
       var  
       $a = $( 
       this 
       ); 
      
       //若是是當前標籤，直接返回 
      
       if  
       ($a.hasClass( 
       "current" 
       )) { 
      
       return  
       false 
       ; 
      
       } 
      
       //爲當前點擊的標籤添加 current 樣式 
      
       $( 
       ".current" 
       ).removeClass( 
       "current" 
       ); 
      
       $a.addClass( 
       "current" 
       ); 
      
       //slideUp 全部內容 
      
       $( 
       ".nav-list" 
       ).slideUp(); 
      
       var  
       id = $a.attr( 
       "href" 
       ).split( 
       "#" 
       )[1]; 
      
       //slideDown 當前內容 
      
       $( 
       "#"  
       + id).slideDown(); 
      
       }); 
      
       });     
      
       </script>

到這裏就實現了基於 jQuery 的選項卡滑動切換效果，你們能夠去演示頁看看效果，固然本篇中的樣式能夠作進一步的修改，最終能夠將這個效果運用於具體的產品中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。