如何确定jQuery中的活动选项卡

时间:2018-06-11 18:19:59

标签: jquery tabs

我试图控制带有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;
      } 
    }        

1 个答案:

答案 0 :(得分:0)

你必须检查&#34;当前&#34;选项卡,通过观察您传递的$_GET变量。

我已经对你原来的东西进行了一些修改,使其更加简单。

然后,在DoSomething函数中,我已经向您展示了如何观察&#34;对于当前标签,如果它不是正在呈现的标签,则不输出任何内容。

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