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

ここまでは順調ですね。すべてが機能します。ここで、「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で生成されたアクティブなタブに追加するにはどうすればよいですか?

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

クラスを検索し、activePHP から提供されたタブに追加します。

<?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>';
?>

このように、HTML からアクティブなタブを見つけて置き換えるために、jQuery でポスト アクションを実行する必要はありません。実際には、すでに準備されている HTML をブラウザーに送信しています。

于 2012-06-05T09:28:12.967 に答える