Question

当我点击标签A，内容显示

当我点击标签B时，A内容隐藏B内容显示

但我想要的效果是当我点击标签A，内容显示时，再点击一个标签内容隐藏。

任何建议都会有所帮助，谢谢

<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>

Answer 1

我已回答Implementing angularJs factory or service for bootstrap tabs

与我准备好示例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

Answer 2

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

Answer 3

In宁愿将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>

angularjs显示/隐藏选项卡，单击相同选项卡隐藏内容

3 个答案: