时间戳

首页 > 解决方案 > 如何在 wordpress 中构建 ajax 选项卡？

php - 如何在 wordpress 中构建 ajax 选项卡？

问题描述

我尝试将我网站中的部门显示为选项卡，当单击一个选项卡时，它将根据部门 ID 显示与该部门相关的数据。

我尝试此代码仅在单击时执行 php 函数（wordpress） ，但我需要标签编号是动态的。

<div class="tabs">
<ul>
    <?php
        $arr1=array(2,3,5,10,22,25,27,28,29,30);    

        $arr2=array("dep1","dep2","dep3","dep4",
        "dep5","dep6","dep7","dep8","dep9","dep10");

        for($i=0;$i<10;$i++){?>
            <li><a href="#tab" id="<?php echo $arr1[$i]; ?>"><?php echo 
                 $arr2[$i];?>
            </a></li>
    <?php  } ?>
 </ul>
 </div>


 <div id="tab" class="section">

 </div>

函数.php：

<?php
 add_action('wp_ajax_tabsfunction', 'tabsfunction');
add_action('wp_ajax_nopriv_tabsfunction', 'tabsfunction');

function tabsfunction() {
$dept_id=$_GET[id];
/** Here I print data according to $dept_id **/
die();
}
?>

脚本.js：

jQuery(document).ready(function() {
jQuery('.tabs a').click(function(e) {
e.preventDefault();

var tab_id = jQuery(this).attr('id'); 

console.log(tab_id);
                jQuery.ajax({
                    type: "GET",
                   url: "wp-admin/admin-ajax.php", 
                    dataType: 'html',
                    data: ({ action: 'tabsfunction', id: tab_id}),
                    success: function(data){
                               jQuery('#tab').html(data);
                    },
                  error: function(data)  
                    {  
                   alert("Error!");
                    return false;
                }  });}); });

它不起作用，它仅显示一个选项卡的数据。console.log(tab_id) ----> 它显示单击的第一个选项卡的 id，单击另一个选项卡时没有更改。

标签： phpajaxwordpresstabs

解决方案

你能更正你的标签列表代码吗？

<div class="tabs">
            <ul>
                <?php
                $arr1 = array(2,3,5,10,22,25,27,28,29,30);
                $arr2 = array("dep1","dep2","dep3","dep4","dep5","dep6","dep7","dep8","dep9","dep10");
                for($i=0;$i<10;$i++)
                {
                    ?>
                    <li><a href="#tab" id="<?php echo $arr1[$i]; ?>"><?php echo $arr2[$i];?></a></li>
                <?php 
                }
                ?>
             </ul>
             </div>
       <?php for($i=0;$i<10;$i++)
             {
                 ?>
                <div id="tab<?php echo $arr1[$i]; ?>" class="section">
                </div>
             <?php 
             }
             ?>

还返回对 ajax 请求的正确响应。

<?php
add_action('wp_ajax_tabsfunction', 'tabsfunction');
add_action('wp_ajax_nopriv_tabsfunction', 'tabsfunction');

function tabsfunction() {
 $dept_id = $_GET[id];
 echo $dept_id; // this just dispay requsted id as tab content here you can add your logic for dynamic content based on id
die();
}
?>

你的脚本js看起来像这样

jQuery(document).ready(function() {
jQuery('.tabs a').click(function(e) {
e.preventDefault();

var tab_id = jQuery(this).attr('id'); 

console.log(tab_id);
            jQuery.ajax({
                type: "GET",
               url: "wp-admin/admin-ajax.php", 
                dataType: 'html',
                data: ({ action: 'tabsfunction', id: tab_id}),
                success: function(data){
                           jQuery('#tab'+tab_id).html(data);
                },
              error: function(data)  
                {  
               alert("Error!");
                return false;
            }  });}); });

推荐阅读