PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

jQuery选项卡切换特效实现步骤

php中世界最好的语言
php中世界最好的语言 原创
2018-04-26 16:46:59 2582浏览

这次给大家带来jQuery选项卡切换特效实现步骤,jQuery选项卡切换的注意事项有哪些,下面就是实战案例,一起来看一下。

1、tab切换 on

nbsp;html>


  <meta>
  <title>jQuery tab切换</title>
  <style>
    *{
      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;
       /*鼠标样式改变为一个手*/
       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>
    <p>
       </p>
             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         <script></script>     <script>     $(function(){        $(".blist").on("click","li",function(){          // 设index为当前点击          var index = $(this).index();          // 点击添加样式利用siblings清除其他兄弟节点样式          $(this).addClass("active").siblings().removeClass("active");          // 同理显示与隐藏          $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();        })     })     </script>

2、tab切换 mouseenter

效果图:

nbsp;html>


  <meta>
  <title>jQuery tab切换</title>
  <style>
    *{
      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;
       /*鼠标样式改变为一个手*/
       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>
    <p>
       </p>
             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         

       

             
  • 电影
  •          
  • 电脑
  •          
  • 冰箱
  •          
  • 空调
  •        
       
             
  • A
  •          
  • B
  •          
  • C
  •          
  • D
  •        
         <script></script>     <script>     $(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>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery实现有幻灯效果tab滑动切换菜单

jQuery实现某门户网站导航页图片拖动排序

jQuery对表格标题排序

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。