[英]Bootstrap nav-tabs 'show' doesn't work?
I am trying to add a search box in my glossary but something is not right. 我想在我的词汇表中添加一个搜索框,但有些事情是不对的。 The glossary is made by ul inside ul (
nav-tabs of bootstrap
)`, in the js I am using the following code: 词汇表是由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');
}
});
The HTML is in the following structure : 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>
I have two problems: 我有两个问题:
Sometimes the search doesn't display anything and when I check with the debug console when I type $j('#audioTab a[href="#MP3"]').tab('show')
, I get [<a href="#MP3" data-toggle="tab" style="display: block;">MP3</a>]
and I noticed that it only displays the div when style
is not set. 有时搜索没有显示任何内容,当我输入调试控制台时,当我输入
$j('#audioTab a[href="#MP3"]').tab('show')
,我得到[<a href="#MP3" data-toggle="tab" style="display: block;">MP3</a>]
我注意到它只在未设置style
时显示div。
When I search for something with empty space or has '/' $j('ul#'+ulTabli+' li a:eq('+li+')').show();
当我搜索空格的东西或者有'/'
$j('ul#'+ulTabli+' li a:eq('+li+')').show();
doesnt work. 不起作用。
显然我忘了删除第二个ul中的活动li
(大的那个内部)
$('.tab-pane ul li.active').removeClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.