Question

我正在尝试在我的词汇表中添加一个搜索框，但有些事情是不对的。词汇表由ul在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>

我有两个问题：

有时搜索没有显示任何内容，当我输入$j('#audioTab a[href="#MP3"]').tab('show')时我使用调试控制台检查时，我得到[<a href="#MP3" data-toggle="tab" style="display: block;">MP3</a>]并且我注意到它只显示{{1}时的div 1}}未设置。
当我搜索空格不足或“/ style无法正常工作时。

编辑： DEMO

Answer 1

显然我忘了删除第二个ul中的活跃li（大一个中的那个）

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

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

1 个答案: