Javascript 更改按钮组引导中按钮点击的内容

我想在点击按钮组中的每个按钮时更改按钮组下面的内容

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary segmentedButton ">Section1</button>
<button type="button" class="btn btn-primary segmentedButton active">Section2</button>
<button type="button" class="btn btn-primary segmentedButton">Section3</button>
</div>

第一节
第2节
第三节

我不想完全加载整个页面。只需更改以下内容

---

一个现有的例子是分段控制。是否有任何简单的方法可以使用html和javascript实现这一点。

您可以为每个部分创建单独的

div

容器，并为其指定一个id属性。然后，在按钮组中的每个按钮上，附加一个属性，该属性指示单击按钮时将呈现哪个

div

演示（使用JQuery）：

$（函数（）{
$（“.btn”）。在（“单击”，函数（）{
//隐藏所有部分
$（“.content节”）.hide（）；
//根据单击的按钮显示节
$（“#”+$（this.attr（“数据段”））.show（）；
});
});
.content部分{
显示：无；
}

第一节
第2节
第三节
第一节
第1节内容如下

第二节
第2节内容如下

第三节
第3节内容如下

可以在单个html文件中添加所有内容，还是可以移动到其他文件？在源位中，如果您在点击时观察url的变化。