bootStrap nav 获取选择的tabindex
时间: 2024-02-09 15:11:37 浏览: 97
bootstrap-下拉选择树.zip
要获取Bootstrap nav中当前选中选项卡的索引,您可以使用jQuery来查找具有`.active`类的选项卡,并使用`.index()`方法获取其父元素的索引。例如,如果您有一个ID为`myTab`的选项卡,您可以使用以下代码来获取当前选中选项卡的索引:
```javascript
var activeTabIndex = $('#myTab .nav-link.active').parent().index();
```
在这个例子中,我们使用jQuery选择器`#myTab .nav-link.active`来查找具有`.active`类的选项卡,并使用`.parent()`方法获取其父元素(即`<li>`元素),然后使用`.index()`方法获取其索引。注意,这将返回零索引的索引,因此第一个选项卡的索引为0,第二个选项卡的索引为1,以此类推。
如果您希望在选项卡更改时获取索引,可以使用Bootstrap nav中的`shown.bs.tab`事件。例如,以下代码将在选项卡更改时打印当前选中选项卡的索引:
```javascript
$('#myTab').on('shown.bs.tab', function (e) {
var activeTabIndex = $('#myTab .nav-link.active').parent().index();
console.log('Active tab index:', activeTabIndex);
});
```
在这个例子中,我们使用了Bootstrap nav中的`shown.bs.tab`事件来侦听选项卡更改,并在事件处理程序中获取当前选中选项卡的索引。
阅读全文