Question

很确定这是一个愚蠢的问题，但经过长时间的搜索，我找不到任何东西。

在浏览英雄联盟页面时，我注意到了一些我希望在自己的页面上复制的内容。

链接：http://na.leagueoflegends.com/en/page/champion-reveal-illaoi-kraken-priestess

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

有人知道一个处理该问题的教程吗？

感谢您的帮助。

编辑：也许如果这个问题对于这个论坛来说是不合适的，那么有一些关于愚蠢的初学者问题的网页设计论坛吗？

Answer 1

有多种方式。

您提供的链接使用Javascript。

虽然Javascript可能提供最强大的方法/功能 - 并且因为您询问是否存在纯CSS方式，我想与您分享这种纯CSS / HTML方式。以下是一个示例：Fiddle Example

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>

CSS：

label {
  display: inline-block;
  color: white;
  background: #009;
  padding: 5px 10px;
  border: 1px solid black;
  margin: 10px 0 0 0;
}

input {
  display: none;
}

input + div {
  display: none;
  border: 1px solid blue;
  padding: 20px;
}

input:checked + div {
  display: block;
}

需要注意的重要事项
除非以下项目到位，否则此标记将不起作用：
1.单选按钮的标签具有for属性，该属性与单选按钮的id属性完全匹配。 标签不一定是按钮旁边的，但可以根据需要单独设置以获得所需的布局。
2.包含内容的div必须紧跟在input之后。它们之间不可能有任何元素。

而且，作为旁注，如果您愿意，包含内容的div可以包含各种丰富的标记，以显示复杂的HTML，如图像，表格，视频嵌入等。

Answer 2

如果您可以提供链接作为示例（或至少图像），那么IT会很好。但是，您所描述的内容可以通过使用jQuery及其.show()和.hide()函数来实现。这样做，你可以创建你想要的DOM元素（例如div，视频，图像......），并通过jQuery隐藏或显示它们。

这是一个小例子（说实话，它不是最狂热的一个，但它有效）。

https://jsfiddle.net/fuzkoewj/

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

2 个答案: