angularjs显示/隐藏选项卡，单击同一标签隐藏内容 [英] angularjs show/hide tabs, click same tab hide the content

问题描述

当我点击选项卡A，A的含量秀

当我点击选项卡B，A的含量隐藏B的含量展

但是当我点击选项卡A，A的内容显示，再次点击选项卡的内容隐藏我想要的效果。

任何建议将帮助谢谢

 ＆LT; UL类=行内文本中心＆GT;
                ＆LT;李班=COL COL-33＆GT;
                    ＆LT; A HREF =JavaScript的：无效（0）; NG-CLASS ={选择：标签== A}NG点击=标签=一个＆gt;在＆LT; I类=图标离子箭头向下-B＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
                ＆LT;李班=COL COL-33＆GT;
                    ＆LT; A HREF =JavaScript的：无效（0）;NG-CLASS ={选择：标签== B}NG点击=标签= B＆GT; B＆LT; I类=图标离子箭头-down-b＆GT;＆下; / I GT;＆下; / A＆GT;
                ＆LT; /李＆GT;
                ＆LT;李班=COL COL-33＆GT;
                    ＆LT; A HREF =JavaScript的：无效（0）; NG-CLASS ={选择：标签== c}里NG点击=标签= C＆GT; C＆LT; I类=图标离子箭头向下-B＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
 ＆LT; D​​IV CLASS =a的NG-秀=标签==一个＆gt;将＆LT; / DIV＆GT;
 ＆LT; D​​IV CLASS =BNG-秀=标签== B＆GT; B＆LT; / DIV＆GT;
 ＆LT; D​​IV CLASS =CNG-秀=标签== C＆GT; C＆LT; / DIV＆GT;
 

解决方案

您需要 NG-点击的你的前pression更改为 NG-点击=标签=标签=='A'空：'A'

 ＆LT; UL类=行内文本中心＆GT;
    ＆LT;李班=COL COL-33＆GT;
        ＆LT; A HREF =JavaScript的：无效（0）; NG-CLASS ={选择：标签=='一'}NG点击=标签=标签=='A'空：'A'＆GT;
          A＆LT; I类=图标离子箭头向下-B＆GT;＆LT; I＆GT /;
          ＆所述; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李班=COL COL-33＆GT;
        ＆LT; A HREF =JavaScript的：无效（0）;NG-CLASS ={选择：标签=='B'}NG点击=标签=标签=='B'空：'B'？ ＆GT;
          b
        ＆所述; I类=图标离子箭头向下-B＆GT;＆下; / I GT;＆下; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李班=COL COL-33＆GT;
        ＆LT; A HREF =JavaScript的：无效（0）; NG-CLASS ={选择：标签=='C'}NG点击=标签=标签=='C'空：'C'＆GT;
          ℃下I类=图标离子箭头向下-B＆GT;＆下; / I GT;
        ＆所述; / A＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; D​​IV CLASS =a的NG-秀=标签=='一'＆gt;将＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =BNG-秀=标签=='B'＆GT; B＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =CNG-秀=标签=='C'＆GT; C＆LT; / DIV＆GT;
 

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