Ajax tabs (wordpress)

问题:

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.

Current Situation:

1. Tab_menu.php : Has tabs which Tab 1 tab is by default shows on the page load. For the Tab 2 tab, menu_tab2.php content is shown on the page load.

    <div class="my_tabs">
       <a href="#my_tab1" id="my_tab_id_1">Tab 1</a>
       <a href="#my_tab2" id="my_tab_id_2">Tab 2</a>
       <a href="#my_tab3" id="my_tab_id_3">Tab 3</a>
       <a href="#my_tab4" id="my_tab_id_4">Tab 4</a>
       <a href="#my_tab5" id="my_tab_id_5">Tab 5</a>
    </div>
    <div class="my_section" id="my_tab1">
       Tab 1 Content            
    </div>
    <div class="my_section" id="my_tab2">
      <?php get_template_part('page/menu_tab2'); ?>            
    </div>
    <div class="my_section" id="my_tab3">
      <?php get_template_part('page/menu_tab3'); ?>            
    </div>
    <div class="my_section" id="my_tab4">
      <?php get_template_part('page/menu_tab4'); ?>            
    </div>
    <div class="my_section" id="my_tab5">
      <?php get_template_part('page/menu_tab5'); ?>            
    </div>
   

2. menu_tab2.php (and similar contents for the rest of the tabs)

    <div class="my_section" id="menu_tab2_content_id">
      Tab 2 content           
    </div>
   

So, I want to load the tab php files content into the corresponding tabs using ajax.

Here is what I have so far (Execute php function only when clicked (wordpress))

jQuery

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

            }); 

     }); 
 }); 

Function.php

 function my_tab_menu() {
   <?php get_template_part('page/tab1'); ?> 
  }

add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');

Problem:

How can I target the individual tab and corresponding php files?

Thanks!

EDIT 1

So based on the answer provided, here is the updated version:

Function.php

 function my_tab_menu() {
   $template_part_path = 'page/tab' . $_GET['id'];
  <?php get_template_part($template_part_path); ?>  
  }

add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');

Also, is $('#div'+tab_id).html(data); correct? I am not understanding the structure and what each component means.

回答1:

Retrieve the posted ID from $_GET['id'] and add it to the path.

$template_part_path = 'page/tab' . $_GET['id'];
<?php get_template_part($template_part_path); ?>