jQuery UI tabs javascript click function not working.

Question

I am using jQuery UI tabs, but I am having an issue.

My javascript code:

 $(function() {
  $("#tabs").tabs();
 }); 

My HTML:

<div class="demo">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Eat</a></li>
    </ul>
    <div id="tabs-1">
      tab 1
    </div>
    <div id="tabs-2">
      tab 2
    </div>
    <div id="tabs-3">
      tab 3
    </div>
  </div>  
</div><!-- End demo -->

I am using another script.js file. from that I am calling one click function.

$("#tabs-2").click(function()
{
  alert("This is tab3");    
});

This function is not working. I want to display some data from the database on clicking each tab. How to write js function using jQuery? Please help me.

Thanks, Raj

Answer 1

This is the correct code you should use

HTML:

<div class="demo">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Eat</a></li>
      <li><a href="#tabs-2">Drink</a></li>
      <li><a href="#tabs-3">Sleep</a></li>
    </ul>
    <div id="tabs-1">
      tab 1
    </div>
    <div id="tabs-2">
      tab 2
    </div>
    <div id="tabs-3">
      tab 3
    </div>
  </div>  
</div>

jQuery:

$(function() {
    $("#tabs").tabs();

    $("#tabs-2").click(function() {
        alert("This is tab2");    
    });
}); ​

You can verify it working here.

Hope it helps

Answer 2

What type of error are you getting? Can you use Firebug to help debug the issue you are having w/your jQuery?

Have you tried:

$("a[href=#tabs-2]").click(function()
{
  alert("This is tab3");    
});