jquery tab插件精简版分享

复制代码 代码如下:

  /*

  * jqpressToos1.0

  *

  * Copyright (c) 2011 yepeng

  * Dual licensed under the MIT (MIT-LICENSE.txt)

  * and GPL (GPL-LICENSE.txt) licenses.

  *

  */

  $.fn.extend({

  //插件名称:Tab选项卡

  jqpressTab: function(options) {

  //参数和默认值

  var defaults = {

  _tabClass: null,//选项卡样式

  _childs:null //子选项 样式选择器

  };

  var options = $.extend(defaults, options);

  var o = options;

  var parentCate = $(this);

  var childCate = $(o._childs);

  parentCate.mouseover(function() {

  parentCate.removeClass(o._tabClass);

  $(this).addClass(o._tabClass);

  for (i = 0; i < parentCate.length; i++) {

  if (parentCate[i].className == o._tabClass) {

  childCate[i].style.display = "block";

  } else {

  childCate[i].style.display = "none";

  }

  }

  });

  }

  });

  })(jQuery);

  调用方法更简单:

  

复制代码 代码如下:

  jQuery(document).ready(function(){ $(".mytab li a").jqpressTab({ _tabClass: "样式名称", _childs: "子元素样式名称" });});

  如果需要根据ID做选择器自己扩展去吧,呵呵