4

我正在使用 html + PHP + jquery 开发一个网页，我面临以下问题。该页面使用 jquery-1-7-2.js（由于某些历史原因，我无法升级......）。我正在使用 PHP 和表单来查询 MySQL 数据库，然后在不同的选项卡中显示结果（使用 jquery）。

问题是我希望在刷新页面时能够保持在当前活动选项卡上（表单会在更改时引发自动刷新）。

我正在使用的代码类型是：

<html>

<div class="container">
  <div class="row">

    <div class="span12">

      <div class="well">
        <div class="row">

          <div class="span2">
            <form name="choice">
            <label>Choice :</label>
            <select name="menu" style="width:150px" onChange="refreshFormTechno(this.options[this.selectedIndex].value);">
            <option value="%">ALL</option>
            <option value="choice1">Choice 1</option>
            <option value="choice2">Choice 2</option>
            </select>
            </form>
          </div>

        </div>
      </div>

    <ul class="nav nav-tabs" id="MyTab">
    <li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li>
    <li><a href="#tab2" data-toggle="tab">Second Tab</a></li>
    <li><a href="#tab3" data-toggle="tab">Third Tab</a></li>
    </ul>


      <div class="tab-content">

        <div class="tab-pane active" id="tab1">
          <div class="row">
        MY CODE TO DISPLAY IN TAB 1
      </div>
        </div>


        <div class="tab-pane" id="tab2">
          <div class="row">
        MY CODE TO DISPLAY IN TAB 2
      </div>
        </div>

        <div class="tab-pane" id="tab3">
          <div class="row">
        MY CODE TO DISPLAY IN TAB 3
      </div>
        </div>

      </div>

    </div>
  </div>
</div>

<script type="text/javascript" language="javaScript">
function refreshFormTechno(value_id)
{
  document.location = './index.php?choice='+value_id;
}
</script>


</html>

如果我通过以下方式更改脚本部分：

<script type="text/javascript" language="javaScript">
function refreshFormTechno(value_id)
{
  //document.location = './index.php?choice='+value_id;
  var index = $('#MyTab a[href="#tab2"]').parent().index();
  alert(index);
}
</script>

我能够获得我想要的选项卡的 ID（0 代表 tab1，1 代表 tab2）。但我无法弄清楚如何获取活动选项卡的 ID。

我发现了很多关于此类问题的线程，并尝试测试提供的代码，但没有成功。我试过了：

<script type="text/javascript" language="javaScript">
function refreshFormTechno(value_id)
{
  //document.location = './index.php?choice='+value_id;
  var index = $('#MyTab').tabs('option', 'selected');
  alert(index);
}
</script>

或者：

<script type="text/javascript" language="javaScript">
function refreshFormTechno(value_id)
{
  //document.location = './index.php?choice='+value_id;
  var index = $('#MyTab').parent.tabs('option', 'selected');
  alert(index);
}
</script>

没有结果...

知道当前的标签索引将允许我在重新加载整个页面时更改默认的活动标签。不仅如此，它还允许我仅在需要时加载 php 脚本并限制页面的充电时间。

预先感谢您的帮助。

4

1 回答 1

3

你不能只使用“活动”窗格ID吗？

var visiblePaneId = $('div.tab-pane.active').attr('id')
var activeTabIndex = $('#MyTab a[href="' + visiblePaneId + '"]').parent().index();

或获取活动选项卡：

var tabHref = $('li.active:first-child').attr('href'); //returns the anchor's href which has #
var activeTabIndex = $(tabHref).parent().index();
于 2013-04-15T13:09:30.467 回答