zoukankan      html  css  js  c++  java
  • jquery tab插件精简版

    自己平时用得比较多tab功能,网上有很强大的tab功能,但是很多时候太过于复杂,所以自己写了一个最简单的jquery插件,代码如下,就不解释了。

    /*
    * 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做选择器自己扩展去吧,呵呵

  • 相关阅读:
    绿色版 notepad++ 添加鼠标右键菜单
    Scala 安装与配置
    Scala 神奇的下划线 _
    Kafka 安装部署
    Pulsar 下一代消息平台
    Sqoop 安装部署
    Flume 常用配置项
    Android-selector
    android- 9patch
    有关内存的思考题
  • 原文地址:https://www.cnblogs.com/jqbird/p/2173211.html
Copyright © 2011-2022 走看看