Custom jQuery tab plug-in example_jquery

复制代码 代码如下:

 
• Users

 
• Groups

 

Users Content

 

Groups Content

<script><br>jQuery.fn.tabs = function (control) {<br>    var element = $(this);<br>    var control = $(control);<br><br>    element.delegate('li', 'click', function () {<br>        // 遍历选项卡名称<br>        var tabName = $(this).attr('data-tab');<br><br>        // 点击选项卡时触发自定义事件<br>        element.trigger('change.tabs', tabName);<br>    });<br><br>    // 绑定到自定义事件<br>    element.bind('change.tabs', function (ev, tabName) {<br>        element.find('li').removeClass('active');<br>        element.find('>[data-tab=' tabName ']').addClass('active');<br>    });<br><br>    element.bind('change.tabs', function (ev, tabName) {<br>        control.find('>[data-tab]').removeClass('active');<br>        control.find('>[data-tab=' tabName ']').addClass('active');<br>    });<br><br>    // 激活第 1 个选项卡<br>    var firstName = element.find('li:first').attr('data-tab');<br>    element.trigger('change.tabs', firstName);<br><br>    return this;<br>};</p> <p>jQuery(function ($) {<br>    $('#tabs').tabs('#tabContent');<br><br>    $('#tab').bind('change.tabs', function (ev, tabName) {<br>        window.loaction.hash = tabName;<br>    });<br><br>    $(window).bind('hashchange', function () {<br>        var tabName = window.location.hash.slice(1);<br>        $('#tabs').trigger('change.tabs', tabName);<br>    });<br>});<br></script>