jquery plugin -tab ...............@慕课网原创_慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .active{
            background: green;
        }
        .content div{
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab" id="tab">
            <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <div class="content">
            <div>aaaaaaaa</div>
            <div>bbbbbbbb</div>
            <div>cccccccc</div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    function Person(element,opt){
        self=element,
        defaults={
            'width':'50px',
            'height':'30px',
            'background':'red',
            'fontSize':'18px',
            'color':'#fff',
            'display':'inline'
        }
        /*create=$.extend({},defaults,opt,add)*/
    }

    Person.prototype.props=function(){
        return self.find("li").css({
            'width':defaults.width,
            'height':defaults.height,
            'background':defaults.background,
            'fontSize':defaults.fontSize,
            'color':defaults.color,
            'display':defaults.display,
        });
    }

    Person.prototype.handleClick=function(){
        return self.find("li").on("click",function(){
            $(this).css("background","green");
            var index=$(this).index();
            Person.prototype.hadnleDisplay(index);
        })
    }

    Person.prototype.hadnleDisplay=function(i){
        self.find(".content").children('div').eq(i).show().siblings().hide();
    }

    $.fn.myObj=function(element,options){
        var obj=new Person(this,options);
        obj.props();
        obj.handleClick();
    }

    $(function(){
        $("#tab").myObj();
    })

</script>