3

タブ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>
4

3 に答える 3

3

私はこのように答えました ブートストラップタブの angularJs ファクトリまたはサービスの実装

ここで例を準備するのと同じ

    <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

于 2015-05-08T18:39:31.593 に答える