title: Ajax tabs (wordpress)
body: <p>So, I am very new at Ajax and after reading some online tutorial, below is what I have understood. Please correct me if I am wrong. </p>
  
  <p><strong>Current Situation:</strong></p>
  
  <ol>
  <li><p>Tab_menu.php : Has tabs which <code>Tab 1</code> tab is by default shows on the page load. For the <code>Tab 2</code> tab, <code>menu_tab2.php</code> content is shown on the page load. </p>
  
  <pre><code> &lt;div class="my_tabs"&gt;
      &lt;a href="#my_tab1" id="my_tab_id_1"&gt;Tab 1&lt;/a&gt;
      &lt;a href="#my_tab2" id="my_tab_id_2"&gt;Tab 2&lt;/a&gt;
      &lt;a href="#my_tab3" id="my_tab_id_3"&gt;Tab 3&lt;/a&gt;
      &lt;a href="#my_tab4" id="my_tab_id_4"&gt;Tab 4&lt;/a&gt;
      &lt;a href="#my_tab5" id="my_tab_id_5"&gt;Tab 5&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="my_section" id="my_tab1"&gt;
      Tab 1 Content            
   &lt;/div&gt;
   &lt;div class="my_section" id="my_tab2"&gt;
     &lt;?php get_template_part('page/menu_tab2'); ?&gt;            
   &lt;/div&gt;
   &lt;div class="my_section" id="my_tab3"&gt;
     &lt;?php get_template_part('page/menu_tab3'); ?&gt;            
   &lt;/div&gt;
   &lt;div class="my_section" id="my_tab4"&gt;
     &lt;?php get_template_part('page/menu_tab4'); ?&gt;            
   &lt;/div&gt;
   &lt;div class="my_section" id="my_tab5"&gt;
     &lt;?php get_template_part('page/menu_tab5'); ?&gt;            
   &lt;/div&gt;
  </code></pre></li>
  <li><p>menu_tab2.php (and similar contents for the rest of the tabs)</p>
  
  <pre><code> &lt;div class="my_section" id="menu_tab2_content_id"&gt;
     Tab 2 content           
   &lt;/div&gt;
  </code></pre></li>
  </ol>
  
  <p>So, I want to load the tab php files content into the corresponding tabs using ajax.</p>
  
  <p>Here is what I have so far (<a href="https://stackoverflow.com/questions/31331953/execute-php-function-only-when-clicked-wordpress/31332113?noredirect=1#comment50652111_31332113">Execute php function only when clicked (wordpress)</a>)</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>    $(document).ready(function() {
          $('.my_tabs a').click(function(e) {
              e.preventDefault();
  
              var tab_id = $('this').attr('id'); 
  
  
              $.ajax({
                  type: "GET",
                  url: "wp-admin/admin-ajax.php", 
                  dataType: 'html',
                  data: ({ action: 'my_tab_menu', id: tab_id}),
                  success: function(data){
                        $('#div'+tab_id).html(data);
              },
              error: function(data)  
              {  
              alert("Error!");
              return false;
              }  
  
              }); 
  
       }); 
   }); 
  </code></pre>
  
  <p><strong>Function.php</strong></p>
  
  <pre><code> function my_tab_menu() {
     &lt;?php get_template_part('page/tab1'); ?&gt; 
    }
  
  add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
  add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>How can I target the individual tab and corresponding php files?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>So based on the answer provided, here is the updated version:</p>
  
  <p><strong>Function.php</strong></p>
  
  <pre><code> function my_tab_menu() {
     $template_part_path = 'page/tab' . $_GET['id'];
    &lt;?php get_template_part($template_part_path); ?&gt;  
    }
  
  add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
  add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');
  </code></pre>
  
  <p>Also, is <code>$('#div'+tab_id).html(data);</code> correct?  I am not understanding the structure and what each component means.</p>