开发jquery tab 插件

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

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

<div id="tab-hd">
    <div class="tab-li action">1div>
    <div class="tab-li">2div>
div>
<div id="tab-body">
    <div class="tab-con-li">1111div>
    <div class="tab-con-li">2222div>
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

 

转载于:https://www.cnblogs.com/yyman001/p/jquery_tab.html