zoukankan      html  css  js  c++  java
  • 开发jquery tab 插件

    开发最简单的效果- -,基本构架

    html,可以换更有意义的结构,这里demo,就简单写,不考虑SEO

    <div id="tab-hd">
        <div class="tab-li action">1</div>
        <div class="tab-li">2</div>
    </div>
    <div id="tab-body">
        <div class="tab-con-li">1111</div>
        <div class="tab-con-li">2222</div>
    </div>

    jq

    $.fn.mtab = function (option){
            var defaultOption = {
                "tabBindElement":"children",
                "tabBindElementEvent":"click",
                "actionClass":"",
                "bodyId":"null",
                "animate":"none"
            };
            if(option){option = $.extend(defaultOption,option);}
    
            this.each(function (){
               var $this = $(this);
                toTab($this);
            });
    
    
            function toTab(_this){
                var children = _this.children();
                var bodyChildren = $(option.bodyId).children();
                bodyChildren.eq(0).show().siblings().hide();
    
                children.on(option.tabBindElementEvent,function(){
                    var $this = $(this);
                    var index = $this.index();
                    $this.addClass(option.actionClass).siblings().removeClass(option.actionClass);
                    bodyChildren.eq(index).show().siblings().hide();
                    return false;
                })
            }
        };
    
    
        $("#tab-hd").mtab({
            "tabBindElement":"children", //children,class,element
            "tabBindElementEvent":"click",//click,mouseover
            "actionClass":"action",
            "bodyId":"#tab-body",
            "animate":"none"
        });

    。。。

      一下这一款是竖着的tab切换

    http://js.itivy.com/jiaoben1584/index.html

  • 相关阅读:
    获取定位
    关于meta 总结
    关于微信 ios的部分兼容(摇动播放)
    mysql
    js_DOM的导航属性--Dom_event事件
    IO阻塞与IO非阻塞2
    进程池
    生产消费者模型
    队列----------------多线程利器
    信号量
  • 原文地址:https://www.cnblogs.com/yyman001/p/jquery_tab.html
Copyright © 2011-2022 走看看