足球游戏_中国足彩网¥体育资讯$

jQuery实现TAB选项卡切换特效简单演示
来源:易贤网 阅读:890 次 日期:2016-08-02 15:53:08
温馨提示:易贤网小编为您整理了“jQuery实现TAB选项卡切换特效简单演示”,方便广大网友查阅!

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下

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;

       /*鼠标样式改变为一个手*/

       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清除其他兄弟节点样式

         $(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;

       /*鼠标样式改变为一个手*/

       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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标