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

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

jquery tabs

如何使用jquery 1.7.2获取当前显示的选项卡索引,jquery,tabs,refresh,Jquery,Tabs,Refresh,我正在用html+PHP+jquery开发一个网页，我面临以下问题。页面使用jquery-1-7-2.js（由于某些历史原因，我无法升级…）。我使用PHP和表单查询MySQL数据库，然后在不同的选项卡中显示结果（使用jquery）问题是，我希望在刷新页面时能够停留在当前的活动选项卡上（表单允许在更改时自动刷新）我使用的代码类型如下： <html> <div class="container"> <div class="row"> <

我正在用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>


选择：
全部的
选择1
选择2





要在选项卡1中显示的我的代码
要在选项卡2中显示的我的代码
要在选项卡3中显示的我的代码
函数refreshFormTechno（值\u id）
{
document.location='./index.php？choice='+value\u id；
}

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

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


函数refreshFormTechno（值\u id）
{
//document.location='./index.php？choice='+value\u id；
var index=$（'#MyTab a[href=“#tab2”]”）。parent（）.index（）；
警报（索引）；
}

我能够获得我想要的选项卡的Id（0表示选项卡1，1表示选项卡2）。但我不知道如何获取活动选项卡的Id

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


函数refreshFormTechno（值\u id）
{
//document.location='./index.php？choice='+value\u id；
var索引=$（'#MyTab'）。选项卡（'选项'，'选定'）；
警报（索引）；
}

或：


函数refreshFormTechno（值\u id）
{
//document.location='./index.php？choice='+value\u id；
var index=$（'#MyTab'）。parent.tabs（'option'，'selected'）；
警报（索引）；
}

没有结果

了解当前选项卡索引将允许我在重新加载整个页面时更改默认的活动选项卡。不仅如此，它还允许我仅在需要时加载php脚本，并限制页面的收费时间

提前感谢您的帮助。

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

您如何隐藏/显示选项卡？我假设您使用的是jquery hide（）&show（）？我对jquery并不熟悉，也没有时间学习它，因此我在刷新URL中添加了一个get参数，并使用PHP设置默认的活动选项卡，并将“活动”值设置为正确的值。这是我想要的，也许这不是最好的练习，但我真的没有时间。无论如何，非常感谢你们的帮助。谢谢你们，第一种方法有效！只需在href

var visiblePaneId=$（'div.tab-pane.active'）.attr（'id'）中添加#标记；var activeTabIndex=$（'#MyTab a[href=“#'+visiblePaneId+'']”）parent（）.index（）
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();