Html 如何在不加载新页面的情况下每次单击按钮都更改内容

很确定这是个愚蠢的问题，但经过长时间的搜索，我什么也没找到

在浏览传奇联盟页面时，我注意到一些我想在自己的页面上复制的东西

链接：

在页面中间有一个视频和文本，下面还有5个按钮，每个按钮代表另一个视频和文本。如果您按下其中一个按钮，文本和视频将平稳变化，但不会加载新页面或任何内容。这是如何实现的？我没有从源代码中获取它。我希望有人能帮忙。这在没有Javascript的情况下是可以实现的吗

有人知道关于这个的教程吗

谢谢你的帮助

---

编辑：如果这个问题不适合这个论坛，是否有一些愚蠢的初学者问题的网页设计论坛？

有多种方法

您提供的链接是通过Javascript实现的

虽然Javascript可能提供了最健壮的方法/功能，而且既然您问是否有纯CSS方式，我想与您分享这种纯CSS/HTML方式。以下是一个例子：

HTML:

<div>
  <label for="content1">First Button Text Here</label>
  <input id="content1" type="radio" name="content">
  <div>
    This is my content.
  </div>
</div>
<div>
  <label for="content2">Second Button Text Here</label>
  <input id="content2" type="radio" name="content">
  <div>
    This is my alternate content.
  </div>
</div>
<div>
  <label for="content3">Third Button Text Here</label>
  <input id="content3" type="radio" name="content">
  <div>
    This is my third set of content.
  </div>
  </label>
</div>

需要注意的重要事项
除非以下项目到位，否则此标记将不起作用：
1.单选按钮的标签具有与单选按钮的

id

属性完全匹配的

for

属性标签不必位于按钮旁边，但可以根据需要分开，以获得所需的布局。
2.包含内容的

div

必须紧跟在

输入之后。它们之间不能有任何元素

另外，作为旁注，如果您愿意，包含内容的
div
可以包含各种丰富的标记来显示复杂的html，如图像、表格、视频嵌入等。
有多种方法

您提供的链接是通过Javascript实现的

虽然Javascript可能提供了最健壮的方法/功能，而且既然您问是否有纯CSS方式，我想与您分享这种纯CSS/HTML方式。以下是一个例子：

HTML:

<div>
  <label for="content1">First Button Text Here</label>
  <input id="content1" type="radio" name="content">
  <div>
    This is my content.
  </div>
</div>
<div>
  <label for="content2">Second Button Text Here</label>
  <input id="content2" type="radio" name="content">
  <div>
    This is my alternate content.
  </div>
</div>
<div>
  <label for="content3">Third Button Text Here</label>
  <input id="content3" type="radio" name="content">
  <div>
    This is my third set of content.
  </div>
  </label>
</div>

需要注意的重要事项

除非以下项目到位，否则此标记将不起作用：

1.单选按钮的标签具有与单选按钮的
id
属性完全匹配的
for
属性标签不必位于按钮旁边，但可以根据需要分开，以获得所需的布局。

2.包含内容的
div
必须紧跟在
输入之后。它们之间不能有任何元素

另外，作为旁注，如果您愿意，包含内容的
div
可以包含各种丰富的标记以显示复杂的html，如图像、表格、视频嵌入等。
如果您可以提供一个链接作为示例（或至少是图像），那就太好了。但是您所描述的内容可以通过使用jQuery及其
.show（）
和
.hide（）
函数非常简单地实现。这样，您只需创建所需的DOM元素（例如div、视频、图像等）并通过jQuery隐藏或显示它们

这里有一个小例子（老实说，这不是最花哨的一个，但它很管用）

如果您能提供一个链接作为示例（或至少是图像），那就太好了。但是您所描述的内容可以通过使用jQuery及其
.show（）
和
.hide（）
函数非常简单地实现。这样，您只需创建所需的DOM元素（例如div、视频、图像等）并通过jQuery隐藏或显示它们

这里有一个小例子（老实说，这不是最花哨的一个，但它很管用）

这是JavaScript。如果你关闭js，这个页面就不工作了。有重叠的幻灯片，当你点击按钮时，一个淡出，另一个进入。（通过DOM检查器查看）天哪，如果我看得更好的话，我自己也会看到的。感谢您的提示。在LOL页面的这个特殊示例中，Javascript做了什么。元素的显示状态刚刚更改？！？如果你认为答案解决了你的问题，请接受它（点击分数下面的复选框）。它是JavaScript。如果你关闭js，这个页面就不工作了。有重叠的幻灯片，当你点击按钮时，一个淡出，另一个进入。（通过DOM检查器查看）天哪，如果我看得更好的话，我自己也会看到的。感谢您的提示。在LOL页面的这个特殊示例中，Javascript做了什么。元素的显示状态刚刚更改？！？我错过了什么吗？如果你认为答案解决了你的问题，请接受它（点击分数下面的复选框）。非常感谢。我想这样试试。好的，记下我在答案中添加的一些项目，作为需要注意的事项。非常感谢。我想这样试试。好的，记下我在答案中添加的一些项目，作为需要注意的事项。