css - 在 AngularJs 中创建选项卡

Question

我正在尝试仅使用带有 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>

即使我单击第一个选项卡，也会显示第二个选项卡的内容。单击第一个选项卡时如何仅显示第一个内容，单击第二个选项卡时如何仅显示第二个内容？

先感谢您。

Answer 1

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，每次单击任何选项卡时都会切换活动选项卡。