javascript - bootstrap3 tab标签页的问题

Question

我是前端菜鸟。

遇到一个问题不知道如何解决，尽量描述清楚吧。

我有一个侧边栏，放在col-md-2位置，具体代码是这样的

<p id="sidebar" class="panel panel-default">
    <p class="panel-heading"><a href="#" data-toggle="collapse"><i class="fa fa-angle-double-left"></i></a></p>
    <ul class="nav nav-list">
        <li><a href="#"><i class="fa fa-dashboard"></i>&nbsp;仪表盘</a></li>
        <li class="nav-header"><a href="#manage_article" data-toggle="collapse"><i class="fa fa-book"></i>&nbsp;图书馆<i class="fa fa-angle-down"></i></a></li>
            <ul id="manage_article" class="nav nav-list collapse second-menu">
                <li role="presentation"><a href="#new-article" data-toggle="tab"><i class="fa fa-plus-circle"></i>&nbsp;新增文章</a></li>
                <li role="presentation"><a href="#article" data-toggle="tab" id="article-tab"><i class="fa fa-gear"></i>&nbsp;管理文章</a></li>
                <li role="presentation"><a href="#comments" data-toggle="tab" id="comments-tab"><i class="fa fa-comments-o"></i>&nbsp;评论管理</a></li>
            </ul>
        <li class="nav-header"><a href="#manage_system" data-toggle="collapse"><i class="fa fa-th"></i>&nbsp;其他<i class="fa fa-angle-down"></i></a></li>
            <ul id="manage_system" class="nav nav-list collapse second-menu">
                <li role="presentation"><a href="#files" data-toggle="tab" id="files-tab"><i class="fa fa-image"></i>&nbsp;静态文件管理</a></li>
                <li role="presentation"><a href="#"><i class="fa fa-stethoscope"></i>&nbsp;关键词检索</a></li>
                <li role="presentation"><a href="#"><i class="fa fa-superpowers"></i>&nbsp;性能检测</a></li>
            </ul>
    </ul>
</p>

在一个折叠菜单底下切换panel没有问题，就是跨菜单切换就会出现问题，出现了两个激活的标签页。

导致这样的函数失效了。

$("#files-tab").on("shown.bs.tab", function(){});

因为对前端不了解，不明白为什么会这样，麻烦大神解释下以及如何解决。。。

Answer 1

后来自己写了个函数,问题解决了

var rm_active = function () {
    $("li").removeClass("active");
    $(this).addClass("active");
};

欢迎更好的答案