Tabs Ereignis Klicken auf aktive Registerkarte

Question

Ich benutze jquery ui Tabs und fragte mich, ob es ein Ereignis gibt, wenn Sie auf eine aktive Registerkarte (oder eine Registerkarte) klicken.

Ich habe die activate versucht und beforeActive aber diese scheinen nur dann, wenn ein nicht aktiven Reiter Feuer geklickt wird (siehe folgenden Code)

$("#tabs").tabs({ 
 
    beforeActivate: function(event, ui) { 
 
    console.log('beforeActivate') 
 
    }, 
 
    activate: function(event, ui) { 
 
    console.log('activate') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<div id="tabs" class="ui-layout-center"> 
 
    <ul> 
 
    <li> 
 
     <a href="#tab-1">Tab #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#tab-2">Tab #1</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tab-container"> 
 
    <div id="tab-1"> 
 
     tab 1! 
 
    </div> 
 
    <div id="tab-2"> 
 
     tab 2! 
 
    </div> 
 
    </div> 
 
</div>

Was ich bin versucht zu tun ist eine Klasse auf der ul umschalten, wenn der aktive li angeklickt wird. Kann dies den Registerkarten zusätzliche Ereignisse mit geschähe, wie ich nicht versuchen, dies über ein separates Klick-Ereignis außerhalb der ui Methoden hinzufügen

Answer 1

Versuchen:

$("#tabs") 
 
    .tabs() 
 
    .on("click", '[role="tab"]', function() { 
 
     $(this).closest("ul") // The current UL 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<div id="tabs" class="ui-layout-center"> 
 
    <ul> 
 
    <li> 
 
     <a href="#tab-1">Tab #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#tab-2">Tab #1</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tab-container"> 
 
    <div id="tab-1"> 
 
     tab 1! 
 
    </div> 
 
    <div id="tab-2"> 
 
     tab 2! 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

kann dies sein fertig mit den Tabs zusätzliche Ereignisse, wie ich versuche, nicht zu hinzufügen ein separates Klickereignis außerhalb der ui Methoden

Nein, soweit ich weiß. Ich habe die Dokumentation überprüft und es gibt kein Ereignis, das ausgelöst wird, wenn Sie auf einen bereits aktivierten Tab klicken.

Wenn Sie jedoch nach anderen Lösungen suchen, kann ich Ihnen vorschlagen, den folgenden Code zu verwenden, um das Click-Ereignis anzuwenden.

HINWEIS: stellen Sie sicher, diese Codezeile hinzufügen, bevor die Registerkarte Plugin Anwendung. Da wir zuerst unser Skript und dann das jquery-Plugin-Skript ausführen wollen, macht das Plugin den angeklickten Tab als aktiv und dann, wenn unser Skript läuft, wird es als aktives Tab ausgewertet, was falsch ist.

$('#tabs li a').on('click',function(){ 
    if($(this).closest('li').hasClass('ui-state-active')){ 
     alert('this tab is already active'); 
    } 
}); 

---

Hier ist ein funktionierendes DEMO

$('#tabs li a').on('click',function(){ 
 
    if($(this).closest('li').hasClass('ui-state-active')){ 
 
     alert('this tab is already active'); 
 
    } 
 
}); 
 

 
$("#tabs").tabs({ 
 
    beforeActivate: function(event, ui) { 
 
     
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<div id="tabs" class="ui-layout-center"> 
 
    <ul> 
 
    <li> 
 
     <a href="#tab-1">Tab #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#tab-2">Tab #1</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tab-container"> 
 
    <div id="tab-1"> 
 
     tab 1! 
 
    </div> 
 
    <div id="tab-2"> 
 
     tab 2! 
 
    </div> 
 
    </div> 
 
</div>