jQuery实现Tab选项卡切换效果简单演示


Posted in Javascript onNovember 23, 2015

本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考。具体如下:

起初我Html代码架子是这样的:

<div class="tabs">  
  <ul>
   <li class="acss" data-box="#panel-1">标签1</li>
   <li class="bcss" data-box="#panel-2">标签2</li>
   <li class="bcss" data-box="#panel-3">标签3</li>
  </ul>
  <div id="panel-1">内容111111</div>
  <div id="panel-2" style="display:none;">内容222222</div>
  <div id="panel-3" style="display:none;">内容333333</div>
</div>

后来换成了下面这个:

<dl class="tabs">
  <dt>
   <a class="acss" href="#panel-1">标签1</a>
   <a class="bcss" href="#panel-2">标签2</a>
   <a class="bcss" href="#panel-3">标签3</a>
  </dt>
  <dd id="panel-1">内容1</dd>
  <dd id="panel-2" style="display:none;">内容2</dd>
  <dd id="panel-3" style="display:none;">内容3</dd>
 </dl>

之所以换成这个,是因为我觉得 dl dt dd 在页面布局中用的比 div ul li 要少,这样可以做到更好的隔离性。我们用js操作dl dt dd 对象,就会更少的影响到页面内其它元素,还有就是不用在li标签中自定义data-box属性,更符合页面书写标准。而且这个结构的整体感觉也比上面那个好。
插件的实现代码如下:

(function ($) {
   $.fn.Tabs = function (options) {
    //默认参数设置
    var settings = {
     beforeCss: "bcss", //激活前样式名
     afterCss: "acss", //激活后样式名
     model: "mouseover" //切换方式("mouseover"或者"click")
    };

    //不为空,则合并参数
    if (options)
     $.extend(settings, options);

    //获取a标签集合
    var arr_a = $("> dt > a", this);

    //给a标签分别绑定事件
    arr_a.each(function () {
     $(this).bind(settings.model, function (event) {






//去除a标签的锚点跳转
    

 event.preventDefault();
      //样式控制
      $(this).removeClass().addClass(settings.afterCss)
      .siblings("a").removeClass().addClass(settings.beforeCss);
      //隐藏与显示控制
      var dd_id = $(this).attr("href");
      $(dd_id).show().siblings("dd").hide();
     });
    });

    //遵循链式原则
    return this.each(function () { });
   };
})(jQuery);

之所以说是轻量级,是因为代码量真的很少,也很简单。加了注释相信大家都可以看懂。

其中settings中的model是用来控制切换方式的:

  • 当为"click"时,点击实现切换;
  • 当为"mouseover"时,鼠标滑入实现切换。

开始时是想用hover来实现鼠标滑入切换的,结果发现,hover不支持bind绑定。因为hover是jquery通过封装 mouseover事件 的产物,它并不是一个正宗的事件,因此无法绑定。
下面给出个DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
  *
  {
   margin: 0;
   padding: 0;
  }    
  .tabs
  {
   width: 504px;
   margin: 50px auto;
   }
   
   .acss,.bcss
   {   
   text-decoration:none;
   line-height: 35px;
   font-size: 14px;
   padding:8px 15px;    
   }
   
   .bcss
   {
    background-color: #D4D4D4;
    border-bottom:1px solid white;
    }
   .acss
   {
    background-color: orange;
    border-bottom:1px solid orange;
    }   
   .tabs dd
   {
   width: 500px;
   height: 300px;
   border: 1px solid orange;
   text-align: center;
   line-height: 300px;
   }
 </style>
</head>
<body>
 
 <dl class="tabs" id="tabs1">
  <dt>
   <a class="acss" href="#panel-1">标签1</a>
   <a class="bcss" href="#panel-2">标签2</a>
   <a class="bcss" href="#panel-3">标签3</a>
  </dt>
  <dd id="panel-1"><h1>鼠标滑入切换</h1></dd>
  <dd id="panel-2" style="display:none;">内容2</dd>
  <dd id="panel-3" style="display:none;">内容3</dd>
 </dl> 
 <dl class="tabs" id="tabs2">
  <dt>
   <a class="acss" href="#panel-4">标签1</a><!--默认第一个激活-->
   <a class="bcss" href="#panel-5">标签2</a>
   <a class="bcss" href="#panel-6">标签3</a>
  </dt>
  <dd id="panel-4"><h1>鼠标点击切换</h1></dd><!--默认第一个显示-->
  <dd id="panel-5" style="display:none;">内容2</dd>
  <dd id="panel-6" style="display:none;">内容3</dd>
 </dl>

 <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../js/jquery.similar.Tabs.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#tabs1").Tabs(); //默认鼠标滑入切换
  $("#tabs2").Tabs({model:"click"}); //设置为点击切换
 </script>
</body>
</html>

效果图如下:

jQuery实现Tab选项卡切换效果简单演示

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
Javascript 数组排序详解
Oct 22 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
Nuxt.js实战详解
Jan 18 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
You might like
PHP parse_url 一个好用的函数
2009/10/03 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
详解JS面向对象编程
2016/01/24 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解node.js的http模块实例演示
2018/07/12 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
Python正则捕获操作示例
2017/08/19 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python 项目转化为so文件实例
2019/12/23 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
同学聚会主持词
2014/03/18 职场文书
导师就业推荐信范文
2014/05/22 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
消防隐患整改通知书
2015/04/22 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android