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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
express express-session的使用小结
Dec 12 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
详解vue 命名视图
Aug 14 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python最基本的输入输出详解
2015/04/25 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python如何实现视频转代码视频
2019/06/17 Python
python 列表推导式使用详解
2019/08/29 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
英文慰问信范文
2015/03/24 职场文书
绿色环保倡议书
2015/04/28 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
常住证明范本
2015/06/23 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
教师学习心得体会范文
2016/01/21 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js
Python软件包安装的三种常见方法
2022/07/07 Python