【问题标题】：jquery accordion tab index using header element ID使用标题元素ID的jquery手风琴选项卡索引
【发布时间】：2013-10-16 01:30:10
【问题描述】：

// html

<div id="accordion" >
   <h3 class='headAcc' id="head_1">First header</h3>
   <div>First content panel</div>
   <h3 class='headAcc'id="head_2">Second header</h3>
   <div>Second content panel</div>
</div>

//javascript

$('#accordion').accordion({collapsible:true,active:false});

问题：所有选项卡默认关闭。所以我需要使用标题元素 id 获取选项卡的索引。我该怎么做。

我已尝试关注。但没有运气。提前致谢。

var indexOfheaderOne= $('h3#head_1').index(); //returns 0 which is ok
var indexOfheaderTwo= $('h3#head_2').index(); // returns 2 instead of 1. 

//I think the reason is it will count the indexes based on all sibling elements
//not just from header elements. Is there any workaround for this.

编辑

@Thusar 解决方案的小修改

假设您的 html 在手风琴之外包含更多 <h3> 元素。然后以下工作将适用于该类型的场景。

HTML

<h3 id="test1">Example Head 1</h3> 
<h3 id="test2">Example Head 2</h3> 
<h3 id="test3">Example Head 3</h3> 

<div id="accordion" >
   <h3 class='headAcc' id="head_1">First header</h3>
   <div>First content panel</div>
   <h3 class='headAcc'id="head_2">Second header</h3>
   <div>Second content panel</div>
</div>

JavaScript

alert($('h3#head_1').index('h3.headAcc'));//return 0 as expected
alert($('h3#head_2').index());//return 2 because element is in after first tab div
alert($('h3#head_2').index('h3.headAcc'));//return 1 as expected

【问题讨论】：

标签： javascript jquery accordion

【解决方案1】：

DEMO

var indexOfheaderTwo= $('h3#head_2').index('h3'); //returns 1 as index of h3 with respect to parent is traced and it is the 2nd child of parent with tag h3.

索引从 0 开始。

问题的解释。

var indexOfheaderOne= $('h3#head_1').index(); //returns 0 As it is first child of parent div

var indexOfheaderTwo= $('h3#head_2').index(); // returns 2 As it is third child of parent div

阅读.index()

【讨论】：

很棒的兄弟。这就是我想要的。

【解决方案2】：

你对它为什么返回 2 的假设是正确的。

将您的索引选择器更改为如下：

var indexOfheaderOne= $('h3').index($('#head_1')); //returns 0 which is ok
var indexOfheaderTwo= $('h3').index($('#head_2')); // returns 1.

JsFiddle：http://jsfiddle.net/GxQ3c/2/

【讨论】：

【解决方案3】：

$("#accordion").accordion("option", "active", i);

你试过这个吗？对于手风琴，它可能是内置功能。

尝试演示this。

【讨论】：