设计一个网页,有几个链接,点击链接显示出其他链接,在点击这个链接出现内容
时间: 2023-06-09 07:02:09 浏览: 60
好的,这很容易实现。您可以使用HTML、CSS和JavaScript来创建这个网页。下面是一个简单的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<h1>Link Example</h1>
<p>Click on the links below to see more links:</p>
<a href="#" onclick="showLinks('link1')">Show link1</a>
<a href="#" onclick="showLinks('link2')">Show link2</a>
<div id="link-container"></div>
<script src="./script.js"></script>
</body>
</html>
```
CSS代码:
```css
#link-container {
display: none;
}
```
JavaScript代码:
```javascript
function showLinks(linkId) {
var linkContainer = document.getElementById('link-container');
if (linkId === 'link1') {
linkContainer.innerHTML = '<a href="#">Link 1-1</a><br><a href="#">Link 1-2</a><br><a href="#">Link 1-3</a>';
} else if (linkId === 'link2') {
linkContainer.innerHTML = '<a href="#">Link 2-1</a><br><a href="#">Link 2-2</a><br><a href="#">Link 2-3</a>';
}
if (linkContainer.style.display === 'none') {
linkContainer.style.display = 'block';
} else {
linkContainer.style.display = 'none';
}
}
```
这段代码会创建一个包含两个链接的网页,当您点击一个链接时,会将其他链接显示在网页上。点击同一个链接会隐藏链接。请在JS代码中添加更多链接,以便扩展该功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)