如何使用 jquery 1.7.2 获取当前显示的选项卡索引答案

【问题标题】：How to get current displayed Tab Index with jquery 1.7.2如何使用 jquery 1.7.2 获取当前显示的选项卡索引
【发布时间】：2013-04-07 08:12:54
【问题描述】：

我正在使用 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 脚本并限制页面的充电时间。

提前感谢您的帮助。

【问题讨论】：

你是如何隐藏/显示标签的？我假设您使用的是 jquery hide() & show()？
我真的不熟悉 jquery，也没有时间学习它，所以我在刷新 URL 中添加了一个 GET 参数，并使用 PHP 设置默认活动选项卡并设置“活动”值在正确的一个。它有效，这就是我想要的，也许这不是最好的做法，但我真的没有时间。无论如何，非常感谢您的帮助。

标签： jquery tabs refresh

【解决方案1】：

您不能只使用“活动”窗格 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();

【讨论】：

谢谢，第一种方法有效！只需在 href var visiblePaneId = $('div.tab-pane.active').attr('id'); var activeTabIndex = $('#MyTab a[href="#' + visiblePaneId + '"]').parent().index(); 中添加 # 标记