gpt4 book ai didi

javascript - angularjs 显示/隐藏标签,点击同一个标签隐藏内容

转载 作者:搜寻专家 更新时间:2023-10-31 22:42:37 42 4
gpt4 key购买 nike

当我点击标签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>

最佳答案

您需要将 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>

关于javascript - angularjs 显示/隐藏标签,点击同一个标签隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30130391/

42 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com