html中如何点击超链接切换四个content,代码怎么写
时间: 2023-04-04 18:01:35 浏览: 68
你可以使用 JavaScript 来实现这个功能,具体代码如下:
HTML 代码:
```
<div>
<a href="#" onclick="showContent(1)">Content 1</a>
<a href="#" onclick="showContent(2)">Content 2</a>
<a href="#" onclick="showContent(3)">Content 3</a>
<a href="#" onclick="showContent(4)">Content 4</a>
</div>
<div id="content1">Content 1</div>
<div id="content2" style="display:none">Content 2</div>
<div id="content3" style="display:none">Content 3</div>
<div id="content4" style="display:none">Content 4</div>
```
JavaScript 代码:
```
function showContent(num) {
for (var i = 1; i <= 4; i++) {
var content = document.getElementById("content" + i);
if (i == num) {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
}
```
这段代码中,我们首先在 HTML 中定义了四个超链接和四个内容区域,然后在 JavaScript 中定义了一个函数 `showContent`,用于切换内容区域的显示。当用户点击某个超链接时,该函数会遍历所有内容区域,将当前要显示的内容区域的 `display` 属性设置为 `block`,其他内容区域的 `display` 属性设置为 `none`,从而实现切换内容的效果。