angularjs显示/隐藏选项卡,单击同一标签隐藏内容 [英] angularjs show/hide tabs, click same tab hide the content
本文介绍了angularjs显示/隐藏选项卡,单击同一标签隐藏内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我点击选项卡A,A的含量秀
当我点击选项卡B,A的含量隐藏B的含量展
但是当我点击选项卡A,A的内容显示,再次点击选项卡的内容隐藏我想要的效果。
任何建议将帮助谢谢
< UL类=行内文本中心>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0); NG-CLASS ={选择:标签== A}NG点击=标签=一个>在< I类=图标离子箭头向下-B>< / I>< / A>
< /李>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0);NG-CLASS ={选择:标签== B}NG点击=标签= B> B< I类=图标离子箭头-down-b>&下; / I GT;&下; / A>
< /李>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0); NG-CLASS ={选择:标签== c}里NG点击=标签= C> C< I类=图标离子箭头向下-B>< / I>< / A>
< /李>
< / UL>
< DIV CLASS =a的NG-秀=标签==一个>将< / DIV>
< DIV CLASS =BNG-秀=标签== B> B< / DIV>
< DIV CLASS =CNG-秀=标签== C> C< / DIV>
解决方案
您需要 NG-点击
的你的前pression更改为 NG-点击=标签=标签=='A'空:'A'
< UL类=行内文本中心>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0); NG-CLASS ={选择:标签=='一'}NG点击=标签=标签=='A'空:'A'>
A< I类=图标离子箭头向下-B>< I&GT /;
&所述; / A>
< /李>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0);NG-CLASS ={选择:标签=='B'}NG点击=标签=标签=='B'空:'B'? >
b
&所述; I类=图标离子箭头向下-B>&下; / I GT;&下; / A>
< /李>
<李班=COL COL-33>
< A HREF =JavaScript的:无效(0); NG-CLASS ={选择:标签=='C'}NG点击=标签=标签=='C'空:'C'>
℃下I类=图标离子箭头向下-B>&下; / I GT;
&所述; / A>
< /李>
< / UL>
< DIV CLASS =a的NG-秀=标签=='一'>将< / DIV>
< DIV CLASS =BNG-秀=标签=='B'> B< / DIV>
< DIV CLASS =CNG-秀=标签=='C'> C< / DIV>
when i click tab A, A content show
when i click tab B, A content hide B content show
but the effect i want is when i click tab A, A content show, click A tab again content hide.
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>
解决方案
You need to change your expression of ng-click
to 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>
这篇关于angularjs显示/隐藏选项卡,单击同一标签隐藏内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文