Javascript 基于视图中的按钮单击切换内容

我有一个小的angular应用程序正在运行，我被一些看起来很简单的东西卡住了！（这里是新来的）

情景： 我在页面上有两个按钮，可以切换相关内容的显示

很少有事情需要发生：

按钮： 1.页面加载时应为活动按钮（同时显示相应内容） 2.单击其他按钮时，应更改活动状态（对于按钮和相关内容） 3.如果单击活动按钮，则不会发生任何事情。它应该保持活跃

我不知道怎么做。感谢所有的帮助

代码

按钮1
按钮2

如果你想不出这一点，你显然没有尽全力；）

我会这样做：

<div class="toggle-btns">
  <button class="toggle-btns__btn" ng-click="content = 1" ng-class="{  toggle-btns__btn--active: content == 1}">Button 1</button>
  <button class="toggle-btns__btn" ng-click="content = 2" ng-class="{  toggle-btns__btn--active: content == 2}">Button 2</button>
</div>
<div class="content-one" ng-show="content == 1">
  <!-- content here -->
</div>
<div class="content-two" ng-show="content == 2">
  <!-- content here -->
</div>

---

如果你不能弄明白这一点，那么你显然没有尽全力；）

我会这样做：

<div class="toggle-btns">
  <button class="toggle-btns__btn" ng-click="content = 1" ng-class="{  toggle-btns__btn--active: content == 1}">Button 1</button>
  <button class="toggle-btns__btn" ng-click="content = 2" ng-class="{  toggle-btns__btn--active: content == 2}">Button 2</button>
</div>
<div class="content-one" ng-show="content == 1">
  <!-- content here -->
</div>
<div class="content-two" ng-show="content == 2">
  <!-- content here -->
</div>

---

实际上有1000 000种方法可以做到这一点。 在视图中使用数据绑定的一种方法：

<div class="toggle-btns" ng-init="active = true">
  <button ng-click="active = true" class="toggle-btns__btn toggle-btns__btn--active">Button 1</button>
  <button ng-click="active = false" class="toggle-btns__btn" >Button 2</button>
  </div>

  <div ng-if="active" class="content-one">
    <!-- content here -->
    <p>content1</p>
  </div>
  <div ng-if="!active" class="content-two">
    <!-- content here -->
    <p>content2</p>
  </div>

按钮1
按钮2
内容1

内容2

---

Plnkr在这里：

实际上有1000 000种方法可以做到这一点。 在视图中使用数据绑定的一种方法：

<div class="toggle-btns" ng-init="active = true">
  <button ng-click="active = true" class="toggle-btns__btn toggle-btns__btn--active">Button 1</button>
  <button ng-click="active = false" class="toggle-btns__btn" >Button 2</button>
  </div>

  <div ng-if="active" class="content-one">
    <!-- content here -->
    <p>content1</p>
  </div>
  <div ng-if="!active" class="content-two">
    <!-- content here -->
    <p>content2</p>
  </div>

按钮1
按钮2
内容1

内容2

---

这里请注意：

@rblakeley如果我有选择的话，我会搞砸React。不幸的是，角度是项目需求的一部分。@rblakeley如果我有选择，我会搞砸React。不幸的是，角度是项目需求的一部分。谢谢。我花了很多时间阅读Angular如何管理范围和事件，以及不尝试创建管理两个按钮状态的内容。我对Angular还很陌生，所以在尝试做一些小事情的时候，我只是想稍微放松一下头脑：）这肯定需要一些时间来掌握窍门——这需要对创建web应用程序的方法进行彻底的重新思考。肯定能帮我了解一些事情，绝对是真的。奇怪的是，为什么这只适用于整数值，而不适用于字符串或“标签”。也许这只是一种恼怒，但计算任意整数似乎有点脏，不是吗？不评判您的编码风格，但代码背后的基本原理是：）它肯定应该与字符串或标签一起工作<上面的代码>内容当然可以是字符串文本。我就是这样把这个例子拼凑起来的。如果语义标记对您有意义，请尝试一下。值得注意的是，我的BEM语法似乎在

ng类

条件检查中出现了中断，除非它周围有引号。谢谢。我花了很多时间阅读Angular如何管理范围和事件，以及不尝试创建管理两个按钮状态的内容。我对Angular还很陌生，所以在尝试做一些小事情的时候，我只是想稍微放松一下头脑：）这肯定需要一些时间来掌握窍门——这需要对创建web应用程序的方法进行彻底的重新思考。肯定能帮我了解一些事情，绝对是真的。奇怪的是，为什么这只适用于整数值，而不适用于字符串或“标签”。也许这只是一种恼怒，但计算任意整数似乎有点脏，不是吗？不评判您的编码风格，但代码背后的基本原理是：）它肯定应该与字符串或标签一起工作<上面的代码>内容当然可以是字符串文本。我就是这样把这个例子拼凑起来的。如果语义标记对您有意义，请尝试一下“r”。值得注意的是，我的BEM语法似乎在

ng类

条件检查中中断，除非它周围有引号。在本例中，我们如何将“active”类应用于相应的按钮"? 现在，我们已经明确了解了切换内容的工作原理，因此非常感谢，但还不能完全确定true状态（两者的计算结果都为）如何允许我们为相应的按钮设置活动类？基本上与前面的示例相同：ng class=“{toggle-btns\uu btn--active:active}”>和第二个按钮ng class=”{toggle-btns\uuu btn--active:！active}“>在本例中，我们如何将“active”类应用于适当的按钮”？现在肯定了解了如何切换内容，因此非常感谢，但不完全确定true的状态（两者的计算结果都是）允许我们为相应的按钮设置活动类？基本上与前面的示例相同：ng class=“{toggle-btns_uu-btn--active:active}”>和第二个按钮ng class=“{toggle-btns_u-btn--active:！active}”>