时间戳

首页 > 解决方案 > 如何确定 jQuery 中的活动选项卡

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

问题描述

我正在尝试使用 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;
      } 
    }

标签： jquerytabs

解决方案

您必须通过查看$_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;
  } 
}

推荐阅读