提交表单后如何导航到同一选项卡？答案

【问题标题】：How to navigate to the same tab after submitting a form?提交表单后如何导航到同一选项卡？
【发布时间】：2016-03-04 14:47:16
【问题描述】：

我有一个表单来过滤数据库中的数据。我正在使用 PHP 和 MySQL 来做到这一点。现在我遇到的问题是，只要我按下“go>>”按钮，它就会重定向到第一个选项卡，即“姓氏详细信息”，并在第二个选项卡即“搜索”中显示结果。默认情况下如何导航到“搜索”选项卡？

代码：

<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"> <a href="#home1" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true"> <i class="fa fa-list"></i>&nbsp;surname Details</a></li>
    <li role="presentation"> <a href="#search" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile"><i class="fa fa-search"></i>&nbsp;Search</a></li>
  </ul>
  <div id="myTabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home1"> you are in the surname details tab </div>
  <div role="tabpanel" class="tab-pane fade" id="search" aria-labelledby="profile-tab">
  <div class="col-md-3">

  <!--left div for displaying the form --> 
  <form action="<?php $_PHP_SELF ?>" method="post">
    <b>Select Surname: <br />
    </b>
    <select name="search" required="required"  autofocus="autofocus">
      <option value="select1">select1 </option>
      <option value="select2">select2</option>
      <option value="select3">select</option>
    </select>
    <b>Select Martial Status:</b>
    <select name="mstat" >
      <option value="">Select </option>
      <option value="Y">Married</option>
      <option value="N">Unmarried</option>
    </select>
    <strong>Select Gender:</strong>
    <input type="radio" name="sex" value="f" required id="gender_0" />
Female
    <input type="radio" name="sex" value="m" required id="gender_1" />
Male
    <b>Enter age range</b><br>
    <input type="text" name="fage" size="2">    to    <input type="text" name="tage" size="2">
    <input type="submit"  value=">>go" >
  </form>
</div>

<!--right div for displaying the result -->
<div class="col-md-9">
  The Result(s) found for the surname<?php echo $searchq;?></b>, marital status<?php echo $searchmstat;?>  gender<?php echo $searchgender;?> of age between<?php echo $searchfage;?> <?php echo $searchtage;?>is: <?php echo $output;?> 
</div>

Image

如果可能的话，我更喜欢 PHP 解决方案，因为我不熟悉 AJAX 和 Javascript。提前致谢。

【问题讨论】：

如果我们对您如何进行标签切换有所了解会有所帮助。

标签： php mysql forms filter tabs

【解决方案1】：

我将继续假设您正在使用引导选项卡。您可以在 HTML 的以下部分更改打开的选项卡：

<?php 
     $tabToOpen = 1; //Or change to 2 under some condition
 ?>
<div role="tabpanel" class="tab-pane fade <?= $tabToOpen==1?"in":"" ?> active" id="home1"> you are in the surname details tab </div>
<div role="tabpanel" class="tab-pane fade <?= $tabToOpen==2?"in":"" ?> " id="search" aria-labelledby="profile-tab">

【讨论】：