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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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
单位速度在实战中的运用
2020/03/04 星际争霸
如何获得PHP相关资料
2006/10/09 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
详解python之简单主机批量管理工具
2017/01/27 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
总务岗位职责
2013/11/19 职场文书
英文求职信写作小建议
2014/02/16 职场文书
学习党章的体会
2014/11/07 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技