Как узнать 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>

...

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

Answer 1

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

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

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

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

Answer 2

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

  $(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 3

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

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

или

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

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