单击按钮更改 div答案

【问题标题】：Change a div on click of button单击按钮更改 div
【发布时间】：2018-06-11 07:19:01
【问题描述】：

我是front-end 的新手。现在，我在这里有3 divs，它将在同一页面上。位置也将相同。这就像切换。所以一开始这将是我将显示的 div

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

然后有按钮whick就像

<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;
}

【问题讨论】：

请展示您的尝试。请记住，SO 是通过调试您编写的代码来帮助您学习的，而不是为您编写代码
是的，我会更新该代码。
为什么要在每个 div 中添加 "？
这是一个拼写错误。
您可以为您的代码创建一个 short runnable 演示吗？我们会更容易为您提供帮助。

标签： javascript jquery html css angularjs

【解决方案1】：

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

在控制器中 定义作用域变量（可与前端绑定）

$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>

【讨论】：