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 将在您每次单击任何选项卡时切换事件选项卡。