1.点击标题显示对应内容 标题1 ===》对应 内容1 标题2 ===》对应内容2 * */
时间: 2023-08-08 13:04:54 浏览: 179
您的问题是如何实现点击标题显示对应内容?
这可以通过HTML和JavaScript实现。您可以使用HTML的锚点或JavaScript的事件监听来实现。
一种常见的实现方式是在HTML中创建一个列表,每个列表项都是一个标题,当用户点击列表项时,JavaScript会根据该项的标识符来显示对应的内容。
以下是一个示例代码:
HTML部分:
```
<ul>
<li><a href="#content1">标题1</a></li>
<li><a href="#content2">标题2</a></li>
</ul>
<div id="content1">
<p>对应内容1</p>
</div>
<div id="content2">
<p>对应内容2</p>
</div>
```
JavaScript部分:
```
const links = document.querySelectorAll('a'); // 获取所有的链接
links.forEach(link => {
link.addEventListener('click', event => {
event.preventDefault(); // 阻止默认的链接跳转行为
const target = event.target.getAttribute('href'); // 获取链接的目标
const content = document.querySelector(target); // 获取对应的内容
content.style.display = 'block'; // 显示对应的内容
});
});
```
当用户点击标题1时,页面将滚动到对应的内容1,并将其显示出来。同样,当用户点击标题2时,页面将滚动到对应的内容2,并将其显示出来。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.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)