0

问题：

搜索包含“活动”类的选项卡并将其删除，同时将“活动”类添加到 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 进行检查，该 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 生成的活动选项卡中？

4

2 回答 2

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 } ?>
于 2012-06-05T08:50:47.323 回答
0

如果您在 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 发送到浏览器。

于 2012-06-05T09:28:12.967 回答