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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
javascript二维数组转置实例
2015/01/22 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python框架中flask知识点总结
2018/08/17 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
客服部工作职责范本
2014/02/14 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
煤矿安全保证书
2015/02/27 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python