Rumah hujung hadapan web tutorial js 自定义jQuery选项卡插件实例_jquery

自定义jQuery选项卡插件实例_jquery

May 16, 2016 pm 05:39 PM
pemalam Sesuaikan tab

复制代码 代码如下:





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>};</script>

jQuery(function ($) {
    $('#tabs').tabs('#tabContent');

    $('#tab').bind('change.tabs', function (ev, tabName) {
        window.loaction.hash = tabName;
    });

    $(window).bind('hashchange', function () {
        var tabName = window.location.hash.slice(1);
        $('#tabs').trigger('change.tabs', tabName);
    });
});



Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara cepat menyediakan avatar tersuai dalam Netflix Cara cepat menyediakan avatar tersuai dalam Netflix Feb 19, 2024 pm 06:33 PM

Cara cepat menyediakan avatar tersuai dalam Netflix

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Feb 25, 2024 pm 11:57 PM

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam!

Ralat memuatkan pemalam dalam Illustrator [Tetap] Ralat memuatkan pemalam dalam Illustrator [Tetap] Feb 19, 2024 pm 12:00 PM

Ralat memuatkan pemalam dalam Illustrator [Tetap]

Apakah direktori pemasangan sambungan pemalam Chrome? Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome?

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Mar 13, 2024 pm 04:34 PM

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini

Bagaimana untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse Bagaimana untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse Jan 28, 2024 am 10:01 AM

Bagaimana untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Feb 20, 2024 pm 04:42 PM

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi?

Proses pengendalian susun atur skrin tersuai edius Proses pengendalian susun atur skrin tersuai edius Mar 27, 2024 pm 06:50 PM

Proses pengendalian susun atur skrin tersuai edius

See all articles