How to find out the TabSelection

Question

Dear All, I have using the code for developing tabs

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

  ...

  It works fine! need The Tab Click Event ,If it is Home Tab Click I have to alert();
  How to achieve this!.Please help me!

Answer 1

Tidy up the formatting of your post.

However if you want the tab click event you would do something like one of the following....

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

or

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

Do a search for jquery cheat sheet to get yourself a very useful jquery cheat sheet.

Answer 2

Set id of Home tab span element

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

and add somethere click handler to it

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

Answer 3

Personally, I'd handle it all in the tab configuration itself rather than adding click events to the elements which ultimately will be the clickable part of the tab. If you do it via the tab config, then all of your tab logic is centralized thus making things cleaner and you don't need to be familiar with the implementation details of the tabs:

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