angularjs show/hide 个标签,点击相同的标签隐藏内容
angularjs show/hide tabs, click same tab hide the content
当我点击选项卡A时,A内容显示
当我点击选项卡 B 时,A 内容隐藏 B 内容显示
但是我想要的效果是点击tab A,A内容显示,再次点击A tab内容隐藏。
任何建议都会有所帮助谢谢
<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>
我已经这样回答了
和我准备的例子一样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>
此处 a
是注释,但 NULL
您需要将 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>
我宁愿将 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>
当我点击选项卡A时,A内容显示
当我点击选项卡 B 时,A 内容隐藏 B 内容显示
但是我想要的效果是点击tab A,A内容显示,再次点击A tab内容隐藏。
任何建议都会有所帮助谢谢
<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>
我已经这样回答了
和我准备的例子一样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>
此处 a
是注释,但 NULL
您需要将 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>
我宁愿将 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>