javascript - 单击按钮更改div

Question

我是前端的新手。现在，这里我有 3 个 div，它们将在同一页上。位置也将相同。这就像切换。 所以一开始这将是我要显示的 div

<div text-angular id="htmlEditorId" >Abc</div>

然后有个按钮就像是

<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>

点击那个按钮

<div text-angular id="secon">abcd</div>

应该显示这个 div 而不是前一个。

然后再次点击那个按钮第三个 div

<div text-angular id="third">azzzbcd</div>

这应该可以看到，并且再次点击第一个应该会显示。这就像循环时尚。

现在我尝试使用 ng-show 和 ng-if。谁能帮我解决这个问题？

$scope.changeTab = function() {
     $scope.showfirst = true;
  $scope.showsecond = false;
}

Answer 1

这很简单，您可以通过多种方式来实现，例如:

在 Controller 中 定义作用域变量(可与前端绑定(bind))

$scope.showView = "firstView"

同时定义一个函数:

$scope.changeView = function(value) {
     $scope.showView = value;
}

在html页面中定义你的div和按钮

<button ng-click="changeView('secondView')">Chage View</button>

<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>