轻松实现jquery选项卡切换效果


Posted in Javascript onOctober 10, 2016

很早之想就学习jquery的插件写法,一直拖到现在,今天趁着没什么工作忙,搜索些资料学习下,写了个比较简单的选项卡效果。

刚开始有看到一个很通俗易通的例子:alert对话框

jquery.alertMsg.js

/**
 * [description]
 * @param {[type]} $ [description]
 * @return {[type]} [description]
 */
(function($){

 $.fn.alertMsg = function(options) {

 var defaults = {
  mouseEvent: 'clcik',
  msg: 'hello world'
 }
 var options = $.extend(defaults, options);
 var $this = $(this);

 $this.on(options.mouseEvent, function(e){
  alert(options.msg);
 })
 }

})(jQuery)

调用方式:

<span id="test">test</span>

$(function(){
 $('#test').alertMsg({
  mouseEvent : "click", 
  msg : "第一次写插件!" 
 });
});

jQuery插件结构

(function($){
 // tabs 自定义的插件名称
 $.fn.tabs = function(options) {

  // 设置默认参数
  var defaults = {
   activeClass: 'active'
   ... 
  }
  // 对象扩展
  var options = $.extend(defaults, options);

  return $(this).each(function(){
   // 编写相应实现代码
  })
 }

})(jQuery)

选项卡实现:

1、HTML结构

<div id="tab">
 <ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
 </ul>
 <div id="tabCon" class="tab-con">
  <div>1的内容</div>
  <div>2的内容</div>
  <div>3的内容</div>
  <div>4的内容</div>
 </div>
</div>

2、jquery.tabs.js

(function($){

 $.fn.tabs = function(options) {

   var defaults = {
    Event: 'click',
    activeClass: 'active'
   }
   var options = $.extend(defaults, options);

   return $(this).each(function(){

    var $thisTab = $(this).find('ul');
    var $tabCon = $thisTab.siblings('div');

    $tabCon.find('div').each(function(){
     $(this).hide();
    });

    $thisTab.find('li:first').addClass(options.activeClass);
    $tabCon.find('div:first').show();

    $thisTab.find('li').each(function(index){

     $(this).on(options.Event, function(){

      $(this).siblings().removeClass(options.activeClass);
      $(this).addClass(options.activeClass);
      $tabCon.find('div').eq(index).show().siblings().hide();

     });
     
    });
   });
  }
 
})(jQuery)

3、调用

$('#tab').tabs({
  activeClass: 'active'
 });

小结:对jQuery插件的初识,感觉应该还要继续优化和扩展,继续学习!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

精彩专题分享:javascript选项卡操作方法汇总 jQuery选项卡操作方法汇总

Javascript 相关文章推荐
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 #Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
对python中的pop函数和append函数详解
2018/05/04 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
物业管理应届生求职信
2013/10/28 职场文书
人事助理岗位职责
2013/11/18 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
小学数学国培感言
2014/03/10 职场文书
元宵晚会主持词
2014/03/25 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
公司年夜饭通知
2015/04/25 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫