Как определить активную вкладку в jQuery

Question

Я пытаюсь контролировать то, что отображается на странице вкладки с помощью значения php.Мой основной код показан ниже.Вкладки работают правильно, что касается переключения.Но код вкладки не управляет кодом php, поэтому вместо отображения содержимого одной вкладки все они отображаются.Есть ли способ контролировать то, что отображается с помощью php, как это?

    <div id="handle-tabs" style="overflow: auto;">
      <ul>
        <li><?php echo '<a href="example.com?section-one">Section One</a>'; ?></li>
        <li><?php echo '<a href="example.com?section-two">Section Two</a>'; ?></li>
        <li><?php echo '<a href="example.com?section-three">Section Three</a>'; ?></li>
      </ul>

      <div id="section-one"> 
          <?php 
          $this_group = 'one';
          DoSomething(1);
          ?> 
      </div>

      <div id="section-two"> 
          <?php 
          $this_group = 'two';
          DoSomething(2);
          ?> 
      </div>

      <div id="section-three">   
          <?php 
          $this_group = 'three';
          DoSomething(3);
          ?>  
      </div>    
    </div>

    function DoSomething($id) {
      switch ($id) {
       case 1: echo 'one'; break; 
       case 2: echo 'two'; break;
       case 3: echo 'three'; break;
      } 
    }        

Answer 1

Вы должны проверить «текущую» вкладку, наблюдая за передаваемой переменной $_GET.

Я немного изменил ее по сравнению с тем, что было изначально, чтобы сделать ее несколькопроще.

Затем, в функции DoSomething, я показал вам, как «следить» за текущей вкладкой и НЕ выводить ничего, если она не отображается.

<div id="handle-tabs" style="overflow: auto;">
  <ul>
    <li><?php echo '<a href="example.com?section=1">Section One</a>'; ?></li>
    <li><?php echo '<a href="example.com?section=2">Section Two</a>'; ?></li>
    <li><?php echo '<a href="example.com?section=3">Section Three</a>'; ?></li>
  </ul>

  <div id="section-one"> 
      <?php 
      $this_group = 'one';
      DoSomething(1);
      ?> 
  </div>

  <div id="section-two"> 
      <?php 
      $this_group = 'two';
      DoSomething(2);
      ?> 
  </div>

  <div id="section-three">   
      <?php 
      $this_group = 'three';
      DoSomething(3);
      ?>  
  </div>    
</div>

function DoSomething( $id ) {
  // load the current tab ID into the $current variable
  $current = (int)( isset( $_GET['section'] ) ) ? $_GET['section'] : '';

  // if the tab to be displayed is not the "current" one, then do NOT render anything
  if ( $id != $current ) {
      return;
  }

  switch ( $id ) {
   case 1: 
       echo 'one'; 
       break; 
   case 2: 
       echo 'two'; 
       break;
   case 3: 
       echo 'three'; 
       break;
  } 
}