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 的选项卡滑动切换效果，你们能够去演示页看看效果，固然本篇中的样式能够作进一步的修改，最终能够将这个效果运用于具体的产品中。