登录  /  注册
首页 > web前端 > js教程 > 正文

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

php中世界最好的语言
发布: 2018-04-26 16:46:59
原创
2583人浏览过

这次给大家带来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&gt;


  <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对表格标题排序

以上就是jQuery选项卡切换特效实现步骤的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号