![](/img/trans.png)
[英]Magento Jquery Bootstrap and Prototype conflict? nav-tabs dont work
[英]Bootstrap nav-tabs 'show' doesn't work?
我想在我的词汇表中添加一个搜索框,但有些事情是不对的。 词汇表是由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>]
我注意到它只在未设置style
时显示div。
当我搜索空格的东西或者有'/' $j('ul#'+ulTabli+' li a:eq('+li+')').show();
不起作用。
编辑: 演示
显然我忘了删除第二个ul中的活动li
(大的那个内部)
$('.tab-pane ul li.active').removeClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.