javascript angularjs 显示/隐藏选项卡，单击同一选项卡隐藏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30130391/
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
angularjs show/hide tabs, click same tab hide the content
提问by Xiao Xinqi
when i click tab A, A content show
当我单击选项卡 A 时，显示内容
when i click tab B, A content hide B content show
当我单击选项卡 B 时，A 内容隐藏 B 内容显示
but the effect i want is when i click tab A, A content show, click A tab again content hide.
但我想要的效果是当我单击选项卡 A 时，显示内容，再次单击选项卡内容隐藏。
Any suggest will be help thanks
任何建议都会有所帮助，谢谢
<ul class="row text-center">
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab==a}" ng-click="tab = a ">a <i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0); " ng-class="{selected: tab==b}" ng-click="tab = b ">b <i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab==c}" ng-click="tab = c ">c <i class="icon ion-arrow-down-b"></i></a>
</li>
</ul>
<div class="a" ng-show="tab == a">a</div>
<div class="b" ng-show="tab == b">b</div>
<div class="c" ng-show="tab == c">c</div>
采纳答案by Pankaj Parkar
You need to change your expression of ng-clickto ng-click="tab = tab=='a'? null: 'a'"
您需要将表达的改变ng-click，以ng-click="tab = tab=='a'? null: 'a'"
<ul class="row text-center">
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab=='a'}" ng-click="tab = tab=='a'? null: 'a'">
a <i class="icon ion-arrow-down-b"></i>
</a>
</li>
<li class="col col-33">
<a href="javascript:void(0); " ng-class="{selected: tab=='b'}" ng-click="tab = tab=='b'? null: 'b' ">
b
<i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab=='c'}" ng-click="tab = tab=='c'? null: 'c' ">
c <i class="icon ion-arrow-down-b"></i>
</a>
</li>
</ul>
<div class="a" ng-show="tab == 'a'">a</div>
<div class="b" ng-show="tab == 'b'">b</div>
<div class="c" ng-show="tab == 'c'">c</div>
回答by vamsikrishnamannem
I have Answered like this Implementing angularJs factory or service for bootstrap tabs
我已经回答了这样为引导选项卡实现 angularJs 工厂或服务
same as I ready the example here
就像我在这里准备的例子一样
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
</ul>
here ais noting but NULL
这里a要注意但是NULL
回答by Sayyed Dawood
In would rather modify the ng-click block nullto tab, as on clicking on the same tab nothing should happen!
宁可将 ng-click 块null修改为tab，因为在单击同一个选项卡时不会发生任何事情！
<ul class="row text-center">
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab=='a'}" ng-click="tab =
tab=='a'? tab : 'a'">
a <i class="icon ion-arrow-down-b"></i>
</a>
</li>
<li class="col col-33">
<a href="javascript:void(0); " ng-class="{selected: tab=='b'}" ng-click="tab =
tab=='b'? tab : 'b' ">
b
<i class="icon ion-arrow-down-b"></i></a>
</li>
<li class="col col-33">
<a href="javascript:void(0);" ng-class="{selected: tab=='c'}" ng-click="tab =
tab=='c'? tab : 'c' ">
c <i class="icon ion-arrow-down-b"></i>
</a>
</li>
</ul>
<div class="a" ng-show="tab == 'a'">a</div>
<div class="b" ng-show="tab == 'b'">b</div>
<div class="c" ng-show="tab == 'c'">c</div>
