JQuery获取当前选择的选项卡的索引（bootstrap）

最新推荐文章于 2023-06-07 16:51:59 发布

原创最新推荐文章于 2023-06-07 16:51:59 发布 · 4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用Bootstrap框架获取当前激活选项卡索引的方法。通过遍历带有'active'类的li元素，可以确定所选选项卡的位置，便于进行进一步的页面逻辑处理。

有的时候我们往往需要获取到当前选择的选项卡的索引，以下是使用bootstrap框架的获取方式。

html代码如下：

            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="tabbable" id="tabs-762548">
                        <ul class="nav nav-tabs" id="questType" style="margin-bottom: 20px;">
                            <li class="active">
                                <a href="#singleSelect" data-toggle="tab">单选</a>
                            </li>
                            <li>
                                <a href="#moreSelect" data-toggle="tab">多选</a>
                            </li>
                            <li>
                                <a href="#judgeSelect" data-toggle="tab">判断</a>
                            </li>
                            <li>
                                <a href="#fillBlank" data-toggle="tab">填空</a>
                            </li>
                            <li>
                                <a href="#subject" data-toggle="tab">主观</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                        </div>
                    </div>
                </div>
            </div>

js代码：

    // 获取题目类型
    var questionType = 0;
    for (var i = 0; i < 5; i++) {
        if ($("#questType").children('li')[i].className == "active") {
            questionType = i+1;
            break;
        }
    }
    console.log(questionType)