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

前端之家收集整理的这篇文章主要介绍了轻松实现jquery选项卡切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

jquery.alertMsg.js

$.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)

调用方式:

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

jQuery插件结构

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

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

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

})(jQuery)

选项卡实现:

1、HTML结构

  • 选项1
  • 选项2
  • 选项3
  • 选项4
  • 1的内容
    2的内容
    3的内容
    4的内容

    2、jquery.tabs.js

    $.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、调用

    小结:

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    精彩专题分享

    猜你在找的jQuery相关文章