twitter-bootstrap 从引导程序隐藏选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14937391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hiding tabs from bootstrap
提问by DevelopmentIsMyPassion
I have this 3 tabs defined in my html. I am using tabs from bootstrap.css
我在我的 html 中定义了这 3 个选项卡。我正在使用 bootstrap.css 中的选项卡
<ul class="nav nav-tabs" id="myTab" style="margin-top: 26px;">
<li><a href="#product" data-toggle="tab" >Product</a></li>
<li><a href="#version" data-toggle="tab">Version</a></li>
<li><a href="#language" data-toggle="tab">Language</a></li>
</ul>
I am trying to hide tabs on one of click event of button. I can get only last tab to hide like this below
我正在尝试隐藏按钮单击事件之一上的选项卡。我只能让最后一个标签像下面这样隐藏
$('#myTab a:last').hide();
But i also want to hide second tab called Version but cant hide it. I tried below code
但我也想隐藏名为 Version 的第二个选项卡，但无法隐藏它。我试过下面的代码
$('#myTab a:second').hide();
But doesn't work and gives error as "Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: second "
但不起作用并给出错误为“未捕获的错误：语法错误，无法识别的表达式：不支持的伪：第二个”
How should i go about this? I cant find much information on this link here
我应该怎么做？我在这里找不到有关此链接的太多信息
回答by Billy Moat
Would this not do the job for you?
这不适合你吗？
<ul class="nav nav-tabs" id="myTab" style="margin-top: 26px;">
<li><a href="#product" data-toggle="tab" >Product</a></li>
<li class="hideme"><a href="#version" data-toggle="tab">Version</a></li>
<li class="hideme"><a href="#language" data-toggle="tab">Language</a></li>
</ul>
.hideme {
display: none;
}
回答by DevelopmentIsMyPassion
I think i managed to do it by knockout way. Defined tabs as below and binded with observable. see below
我想我设法通过淘汰赛的方式做到了。如下定义的选项卡并与 observable 绑定。见下文
<ul class="nav nav-tabs" id="myTab" style="margin-top: 26px;">
<li><a href="#product" data-toggle="tab" >Product</a></li>
<li><a href="#version" data-toggle="tab" data-bind ="visible: showVersionTab">Version</a></li>
<li><a href="#language" data-toggle="tab" data-bind ="visible: showLanguageTab">Language</a></li>
</ul>
Then i just set observables to true and false whenever i need it.
然后我只是在需要时将 observables 设置为 true 和 false。
回答by spitoglou
Why not assign id's to your <li>elements?
eg.
为什么不将 id 分配给您的<li>元素？例如。
<li id='1'><a href="#product" data-toggle="tab" >Product</a></li>
<li id='2'><a href="#version" data-toggle="tab">Version</a></li>
<li id='3'><a href="#language" data-toggle="tab">Language</a></li>
Then you can hide:
然后你可以隐藏：
$('#1').hide();
and 'un'-hide
和'un'-隐藏
$('#1').show();
回答by Edgardo Genini
To hide it, it is sufficient to remove the active class from the content.
要隐藏它，从内容中删除活动类就足够了。
In the element to the attribute href has the id of the element "content" so if we use jquery we can do the following:
在属性 href 的元素中，具有元素“内容”的 id，因此如果我们使用 jquery，我们可以执行以下操作：
var contentId = $('#myTab a:last').prop('hash'); // href value.
$( contentId ).removeClass('active');
to search by index you can use:
要按索引搜索，您可以使用：
$('#myTab li:eq(2) a').prop('hash');
$( contentId ).removeClass('active');
回答by Shail
Use like this $('#myTab li:eq(1) a').tab('show');
像这样使用 $('#myTab li:eq(1) a').tab('show');
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name`
