Как узнать TabSelection

Question

Я использовал следующий код для разработки вкладок.

$(document).ready(function() {
    $('#container-1').tabs();
}
 ....
<div id="container-1">
    <ul>
        <li><a href="#fragment-1"><span>Home</span></a></li>
        <li><a href="#fragment-2"><span>Contact</span></a></li>
    </ul>
</div>

...

Работает нормально! Мне нужно событие нажатия вкладки. Если это нажмите вкладку " Главная ", я должен сделать alert();, Как мне этого добиться?

Answer 1

Лично я бы справился со всем этим в самой конфигурации вкладки, а не добавлял события щелчка к элементам, которые в конечном итоге станут активируемой частью вкладки. Если вы сделаете это через конфигурацию вкладок, то вся логика вкладок будет централизованной, что сделает вещи более понятными, и вам не нужно будет знать детали реализации вкладок:

  $(document).ready(function() {
      $('#container-1').tabs({
          selected : function(e, ui) {
            if (ui.index == 0) {
                alert('Home clicked!');
            }
          }        
      }); 
  });
   ....
  <div  id="container-1">
        <ul>
            <li><a href="#fragment-1"><span>Home</span></a></li>
            <li><a href="#fragment-2"><span>Contact</span></a></li>

         </ul>
  </div>

Answer 2

Установите идентификатор элемента span вкладки Home:

<li><a href="#fragment-1"><span id="home">Home</span></a></li> 

И добавьте к нему обработчик кликов:

$("#home").click(function()
{
    alert("Home tab is selected!");
});

Answer 3

Если вы хотите событие нажатия вкладки, вы должны сделать что-то вроде одного из следующих.

$("#tabid").click(function(e) {
    e.preventDefault();
    // Do tab click logic
});

или же

$(".tabclass").click(function(e) {
    e.preventDefault();
    // Do tab click logic
});

Выполните поиск по шпаргалке JQuery, чтобы получить очень полезную шпаргалку JQuery.