-2

我使用 twitter bootstrap 的导航栏。每个选项卡的内容来自一个从数据库加载数据的 php 函数。页面加载后，我希望能够在选项卡更改时刷新每个选项卡下的数据（相当于再次调用相应的 php 函数）。我猜这将是 jquery onclick() 事件，但我如何更新内容？

<?php 
    require_once 'Offers.php';
    $offers = new Offers();
?>

<div class="navbar">
   <div class="navbar-inner">
    <ul class="nav" id="mytab">
      <li class="active"><a href="#tab1" data-toggle="tab">A</a></li>
      <li><a href="#tab2" data-toggle="tab">B</a></li>
      <li><a href="#tab3" data-toggle="tab">C</a></li>
    </ul>
  </div>
</div>


 <div class="tab-content">
     <div class="tab-pane active" id="tab1">
       <?php echo($offers->retrieveA());?>   
     </div>
     <div class="tab-pane" id="tab2">
       <?php echo($offers->retrieveB());?>
     <div class="tab-pane" id="tab3">
       <?php echo($offers->retrieveC());?>
    </div>

4

2 回答 2

2

所以这里有一个非常简单的使用 ajax 的解决方案。

首先，我们将 jquery 事件 click 附加到每个选项卡，然后对我们的函数进行 ajax 调用。因为通常 ajax 事件调用文件中的一些 php 脚本，而这里我们必须处理函数，所以我们将它们放在一个单独的 php 文件中，并使用switch case语句在它们之间进行选择。

所以我们开始吧。首先，我们将 id 添加到导航栏选项卡：

<li class="active"><a href="#tab1" data-toggle="tab" id="nav1">A</a></li>
<li><a href="#tab2" data-toggle="tab" id="nav2">B</a></li>
<li><a href="#tab3" data-toggle="tab" id="nav3">C</a></li>

然后单击每个选项卡的事件处理程序。每个处理程序都使用 ajax 来更新选项卡内容。

//Functions to dynamically update navbar
$('#nav1').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab1'},
           type: 'post',
           success: function(output) {
                     $('#tab1').html(output);
                    }
    });
});
$('#nav2').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab2'},
           type: 'post',
           success: function(output) {
                      $('#tab2').html(output);
                    }
    });
});
$('#nav3').click(function() {
    $.ajax({ url: 'refreshTabContent.php',
           data: {whichTab: 'tab3'},
           type: 'post',
           success: function(output) {
                      $('#tab3').html(output);
                    }
    });
});

就是这样。在每个处理程序中，我们将即将编写的新 php 脚本称为“refreshTabContent.php”。在该脚本中，我们根据 的值whichTab调用相应的函数，该函数返回我们希望在相应选项卡中显示的内容，然后将其回显。

<?php

require_once 'Offers.php';
$offers = new Offers();


if(isset($_POST['whichTab']) && !empty($_POST['whichTab'])) {
    $action = $_POST['whichTab'];
    switch($action) {
        case 'tab1' : 
            echo($offers->retrieveA());
            break;
        case 'tab2' : 
            echo($offers->retrieveB());
            break;
        case 'tab3' : 
            echo($offers->retrieveC());
            break;
    }
}

?>
于 2013-03-07T20:16:59.030 回答
1

您可以在不重新加载整个页面的情况下即时更新任何内容的唯一方法是通过 javascript/jQuery，特别是在您使用 ajax 的情况下。因此，您必须将一个附加onclick到您的选项卡上，该选项卡运行一个 ajax 调用回您的 PHP 文件。（我不记得引导程序如何附加它自己的onclick，所以如果它根本不起作用，那是我首先要检查的地方）。

但是，我个人会以可以接受参数的方式编写您的 PHP 文件的第二个版本，$_GET以便它可以仅返回所选选项卡的内容。结果通过 ajax 返回，然后您可以将其发送回选项卡。

根据您从 PHP 获取的内容，当您单击选项卡时，这可能会导致短暂的加载暂停。

无论如何，如果您要在单击选项卡时重新加载它，我不确定是否值得提前加载选项卡内容。没有更多细节很难说。

于 2013-03-07T19:21:58.787 回答