Javascript 击倒：如何在单击按钮时切换多个div的可见性？

我想使用knockout切换多个div的可见性。下面是我的问题的大致思路-

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>

按钮1
按钮2
按钮3
第一组
第2组
第3组

默认情况下，“Div 1”应该可见

单击单个按钮时，它应仅显示基于所单击按钮的相关div

我已经通过了淘汰赛的实例，但没有得到如何有效地做到这一点

---

请帮忙

以下内容将为您提供帮助。这并不理想，但应该给你一个工作平台

首先，Knockout中的所有内容都与视图模型相关联。您希望能够控制3个div的可见性，因此这里有一个视图模型可能适合您。就像我说的，不完美：）

您需要将标记更改为：-

<!-- events here.  When clicked call the referenced function -->
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>

<!-- Visibility set here -->
<div data-bind="visible: button1Visible"> Div 1 </div>
<div data-bind="visible: button2Visible"> Div 2 </div>
<div data-bind="visible: button3Visible"> Div 3 </div>

---

这些按钮和相应的div是通过foreach循环在子视图模型（如“UserOptionVM”）的实例上呈现的，还是它们只是硬编码的？谢谢Paul，这有点帮助。当我点击一个按钮时，我更关心的是禁用另外两个div。我们可以说这就像选择一个标签。你能帮我做点什么吗？我想要一个有效的解决这个问题的办法。怎样才能做到呢？

<!-- events here.  When clicked call the referenced function -->
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>

<!-- Visibility set here -->
<div data-bind="visible: button1Visible"> Div 1 </div>
<div data-bind="visible: button2Visible"> Div 2 </div>
<div data-bind="visible: button3Visible"> Div 3 </div>

// Create view model
var vm = new buttonVm();
ko.applyBindings(vm);