4

ng-show と ng-hide で div のみを使用して単純なタブを作成しようとしています。jQuery や BootStrap は使いたくありません。タブを作成しましたが、div を正しく処理できません。

JS Fiddle

<div  ng-app ng-controller="sample">

    <div class="cb" ng-click="showDetails = ! showDetails">tab 1</div>
    <div class="cb" ng-click="showDetails = ! showDetails">tab 2</div>

    <div ng-hide="showDetails">
        <p>first</p>
     </div>

    <div ng-show="showDetails">
        <p>second</p>
    </div>

最初のタブをクリックしても、2 番目のタブのコンテンツが表示されます。最初のタブをクリックしたときに最初のコンテンツのみを表示し、2 番目のタブをクリックしたときに 2 番目のコンテンツを表示するにはどうすればよいですか?

前もって感謝します。

4

1 に答える 1

19

http://jsfiddle.net/x8xfM/2/

<div  ng-app ng-controller="sample" ng-init="tab=1">

        <div class="cb" ng-click="tab = 1">tab 1</div>
        <div class="cb" ng-click="tab = 2">tab 2</div>

        <div ng-show="tab == 1">
            <p>first</p>
         </div>

        <div ng-show="tab == 2">
            <p>second</p>
        </div>
</div>

あなたの場合、任意のshowDetails = !showDetailsタブをクリックするたびにアクティブなタブが切り替わります。

于 2013-06-24T09:05:17.867 に答える