Question

问题：

要搜索包含“active”类的选项卡，并在向PHP POST提交的当前选项卡添加“active”类时将其删除。

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

HTML code：

<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');
})

到目前为止，非常好。一切正常。现在，当我按一个按钮说“submit-updatetime”时，我希望用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生成的活动选项卡中？

Answer 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 } ?>

Answer 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;
  }
}
?>

注意： 添加到您需要匹配的switch case。由于您未在问题上提及，因此$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发送到浏览器。

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

2 个答案: