javascript - Bootstrap nav-tabs 'show' 不起作用？

Question

我想在我的词汇表中添加一个搜索框，但有些地方不对。词汇表由 ul inside ul ( nav-tabs of bootstrap )` 制作，在 js 中我使用以下代码:

$j('#search_glossary').focus().keyup(function(e){
if (this.value.length >= 2){

$j('.nav-tabs li.active').removeClass('active');
        $j('.tab-content div.active').removeClass('active');
        var filterBy = this.value.toUpperCase();
        for (var abbr in UlTab) {
if (abbr.toUpperCase().indexOf(filterBy) !== - 1) {
var li = abbr;
        var ulTabli = UlTab[abbr];
        var globalUl;
        if (/tv/.test(ulTabli)) globalUl = "tv";
        if (/video/.test(ulTabli)) globalUl = "video";
        if (/audio/.test(ulTabli)) globalUl = "audio";
        $j('ul#' + ulTabli + ' li a').show();
        $j('ul#' + ulTabli + ' li a:eq(' + li + ')').show();
        $j('#' + ulTabli + ' a[href="#' + li + '"]').tab('show');
        $j('#glossaryTab a[href="#' + globalUl + '"]').tab('show');
        break;
}

$j('.nav-tabs li.active').removeClass('active');
        $j('.tab-content div.active').removeClass('active');
}
});

HTML 的结构如下:

<ul id="glossaryTab" class="nav nav-tabs nav-justified">
    <li><a href="#video" data-toggle="tab">video</a></li>
    <li><a href="#audio" data-toggle="tab">audio</a></li>
    <li><a href="#tv" data-toggle="tab">tv</a></li>
</ul>
<div id="glossary_content" class="tab-content">
    <div class="tab-pane fade" id="video">
        <ul id="videoTab" class="nav nav-pills">
            <li>...</li>
            <li>...</li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane glossary" id="...">...</div>
            ....
        </div>

我有两个问题:

1. 有时搜索不显示任何内容，当我在调试控制台中输入 $j('#audioTab a[href="#MP3"]').tab('show') 时进行检查。 , 我得到 [<a href=​"#MP3" data-toggle=​"tab" style=​"display:​ block;​">​MP3​</a>​]我注意到它只在 style 时显示 div未设置。

2. 当我搜索带有空格或包含“/”的内容时 $j('ul#'+ulTabli+' li a:eq('+li+')').show();不起作用。

编辑: DEMO

Answer 1

显然我忘记删除第二个 ul 中的事件 li(大里面的那个)

$('.tab-pane ul li.active').removeClass('active');