jq 实现选项卡效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #tabs{
            background-color:rgb(83, 82, 82);
            width: 500px;
        }

        #tabs > li {
            list-style:none;
            display: inline-block;
            width:15%;
            color:white;
            cursor:pointer;
        }

        #tabsContent > div{
            border: 1px solid;
            height:100px;
            width:500px;
            display:none;
        }
        li.active{
            color:red !important;
        }
        div.active{
            display:block !important;
        }
    </style>
</head>

<body>

    <ul id = 'tabs'>
        <li data-tab="users">Users</li>
        <li data-tab='groups'>Groups</li>
    </ul>
    <div id='tabsContent'>
        <div data-tab='users'>users...</div>
        <div data-tab='groups'>groups...</div>
    </div>


    <script>
    jQuery.fn.tabs = function(control){
        var element = $(this);      
        var control = $(control);

        element.delegate('li','click',function(){
            var tabName = $(this).attr('data-tab');
            element.trigger('change.tabs',tabName);     //trigger 可以触发自定义事件
        })
        
        //bind 可以绑定自定义事件
        element.bind('change.tabs',function(e,tabName){
            element.find('li').removeClass('active');
            element.find(">[data-tab='"+tabName+"']").addClass('active');
            control.find(">[data-tab]").removeClass('active');
            control.find(">[data-tab='"+tabName+"']").addClass('active');
        });

        // element.bind('change.tabs',function(e,tabName){
   
        // });

        var firstName = element.find('li:first').attr('data-tab');
        element.trigger('change.tabs',firstName);
        return this;

    }
    $(function(){
        $('#tabs').tabs('#tabsContent');
    })
    </script>
</body>

</html>
posted on 2018-04-15 08:41 kerryk 阅读(297) 评论(0) 编辑收藏举报