Question

I have using the following 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! I need the tab click event. If it is the Home tab click, I have to do alert();. How do I achieve this?

Answer 1

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>