Ajax tab content loading

Question

So, I have a 2 tabs as following:

<div class="tabs">
  <a href="#tab1" class="active-tab tab" id="tab1-id">Tab 1</a>
  <a href="#tab2" class="tab" id="tab2-id">Tab 2</a>      
</div>
<div class="active-panel" id="tab1">
  Tab 1 content
</div>
<div class="panel" id="tab2">
  <!--Tab 2 content located in tab2.php-->
</div>

Then here is my script:

jQuery("#tab2-id").click(function(){
    jQuery("#tab2").load("tab2.php");
});

The file location is as following: parts/tab1.php and parts/tab2.php

So, my logic is that when the Tab 2 is clicked, then I want to load tab2.php in the div id="tab2" .

What am I doing wrong?

EDIT:

After the correct location syntax was pointed out, I am getting 404 error that the browser could not find http://example.com/parts/tab2.php . But tab2.php is a simple few div file and maybe I am missing something. I will do some digging around and find out why I am getting this error and put what I find in here. Thanks.

Answer 1

Use the correct location

jQuery("#tab2-id").click(function(){
    jQuery("#tab2").load("/parts/tab2.php");
});