引导导航栏刷新选项卡更改 - Bootstrap navbar refresh on tab change

我使用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>

这是一个使用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;
    }
}
?>

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

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

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

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