Home > Web Front-end > JS Tutorial > Custom jQuery tab plug-in example_jquery

Custom jQuery tab plug-in example_jquery

WBOY
Release: 2016-05-16 17:39:05
Original
751 people have browsed it

复制代码 代码如下:





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>


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template