搜索选项卡并将其替换为活动选项卡答案

【问题标题】：Search for tab and replace it with active one搜索选项卡并将其替换为活动选项卡
【发布时间】：2012-06-05 07:20:33
【问题描述】：

问题：

搜索包含“活动”类的选项卡并将其删除，同时将“活动”类添加到 PHP POST 提交的当前选项卡。

我有一个看起来像这样的标签菜单。

HTML 代码：

<div class="pull-right special-search" id="navtabs">
    <div class="btn-group">
        <a href="#tab1" class="active btn btn-info" data-toggle="tab"><i class="icon-home icon-white"></i>&nbsp;Start</a>
        <a href="#tab2" class="btn btn-info" data-toggle="tab"><i class="icon-book icon-white"></i>&nbsp;Essay</a>
        <a href="#tab3" class="btn btn-info" data-toggle="tab"><i class="icon-ok-sign icon-white"></i>&nbsp;Criteria</a>
        <a href="#tab4" class="btn btn-info" data-toggle="tab"><i class="icon-time icon-white"></i>&nbsp;Activity</a>
    </div>
</div>

要在这些选项卡之间切换，我使用以下 jQuery 代码：

$('#navtabs a[data-toggle="tab"]').on('shown', function (e) {
    e.target;
    e.relatedTarget;
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');
})

到目前为止，一切都很好。一切正常。 现在，当我按下一个按钮说“提交更新时间”时，我希望它与 PHP 进行检查，它对应于它是从哪个选项卡发送的。我通过使用隐藏类型字段来做到这一点：

<input type="hidden" id="submit_button" name="button_pressed">

然后用PHP检查一下，使用如下代码：

<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') 
    {
        $button = $_POST['button_pressed'];

        if ($button == 'submit-updategrades')
            $tabname = 'tab2';
        else if ($button == 'submit-updatetime')
            $tabname = 'tab4';
    }
?>

为了确保用户停留在他/她所在的选项卡上，我使用了以下 PHP/jQuery：

<?php           
    if (!empty($tabname))
    {
        echo '$("#navtabs a[href=#tab1]").removeClass(\'active\');';
        echo '$("#tab1").removeClass(\'active\');';
        echo '$("#navtabs a[href=#'.$tabname.']").addClass(\'active\');';
        echo '$("#'.$tabname.'").addClass(\'active\');';
    }
?>

除了我觉得我的最后一个 PHP/jQuery 解决方案有缺陷之外，这很好用。例如，#tab1 仅在您进入页面时才处于活动状态，不一定一直处于活动状态。

问题：

如何在最后一个 PHP/jQuery 代码中搜索具有“活动”类的选项卡并将其删除，同时将其添加到使用 $tabname 生成的活动选项卡中？

【问题讨论】：

按下按钮后页面是否重新加载？

标签： php jquery post button tabs

【解决方案1】：

如何找到具有active 类的选项卡：

$(document).ready(function(){
    var tab = $('#navtabs a.active');
});

在找到的选项卡上删除 active 类：

$(document).ready(function(){
    var tab = $('#navtabs a.active');
    tab.removeClass('active');
});

查找、删除 active 类并将其添加到 PHP 提供的选项卡：

<?php           
if (!empty($tabname)) { ?>
$(document).ready(function(){
    var active_tab = '#<?php echo $tabname; ?>';
    var tab = $('#navtabs a.active');
    tab.removeClass('active');
    $('#navtabs a').each(function(){
        if($(this).attr('href') == active_tab) {
            $(this).addClass('active');
            return;
        }
    });
});
<?php } ?>

【讨论】：

【解决方案2】：

如果您在 HTML 输出之前执行活动选项卡验证，则可以执行一个没有脚本的简单解决方案：

PHP 活动标签验证

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

  // clear the variable from undesirable contents
  $button = strip_tags(trim($_POST['button_pressed']));

  // reset variables
  $tab1 = $tab2 = $tab3 = $tab4 = '';

  // check the variable contents
  switch ($button) {
    case "submit-updategrades": $tab2 = 'active'; break;
    case "submit-updatetime":   $tab4 = 'active'; break;
    default:                    $tab1 = 'active'; break;
  }
}
?>

注意： 将需要匹配的case 添加到switch。 $tab3 不存在，因为您没有在问题中提及。

使用适当的活动选项卡输出 HTML

<?php
echo '
<div class="pull-right special-search" id="navtabs">
  <div class="btn-group">
    <a href="#tab1" class="'.$tab1.' btn btn-info" data-toggle="tab">
      <i class="icon-home icon-white"></i>&nbsp;Start
    </a>
    <a href="#tab2" class="'.$tab2.' btn btn-info" data-toggle="tab">
      <i class="icon-book icon-white"></i>&nbsp;Essay
    </a>
    <a href="#tab3" class="'.$tab3.' btn btn-info" data-toggle="tab">
      <i class="icon-ok-sign icon-white"></i>&nbsp;Criteria
    </a>
    <a href="#tab4" class="'.$tab4.' btn btn-info" data-toggle="tab">
      <i class="icon-time icon-white"></i>&nbsp;Activity
    </a>
  </div>
</div>';
?>

这样，您无需使用 jQuery 执行任何发布操作即可从 HTML 中查找和替换活动选项卡。您实际上是在将已经准备好的 HTML 发送到浏览器。

【讨论】：