为已有评论添加查看回复功能
时间: 2024-01-08 22:10:19 浏览: 30
好的,以下是添加了查看回复功能的评论区HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>评论区</title>
<style>
body {
background-color: #f3f3f3;
font-family: Arial, sans-serif;
}
h1, h2 {
text-align: center;
color: #444;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
margin-bottom: 20px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
padding: 20px;
}
li {
margin-bottom: 10px;
}
strong {
font-weight: bold;
color: #4CAF50;
}
.reply {
margin-left: 20px;
font-style: italic;
color: #888;
}
</style>
</head>
<body>
<h1>欢迎来到评论区</h1>
<form>
<label for="name">昵称:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="comment">评论:</label>
<textarea id="comment" name="comment" required></textarea><br><br>
<input type="submit" value="提交">
</form>
<h2>已有评论:</h2>
<ul>
<li id="comment-1"><strong>小明:</strong>这篇文章写得很好!<a href="#" class="reply-link" data-comment-id="1">查看回复</a>
<ul class="reply-list" id="reply-list-1">
<li><strong>小红:</strong>谢谢!</li>
<li><strong>小刚:</strong>赞同!</li>
</ul>
</li>
<li id="comment-2"><strong>小红:</strong>非常有帮助,谢谢分享!<a href="#" class="reply-link" data-comment-id="2">查看回复</a>
<ul class="reply-list" id="reply-list-2">
<li><strong>小明:</strong>不客气!</li>
</ul>
</li>
</ul>
<script>
// 获取所有“查看回复”链接
var replyLinks = document.querySelectorAll('.reply-link');
// 给每个链接添加点击事件
replyLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// 获取链接所在的评论ID和回复列表
var commentId = this.getAttribute('data-comment-id');
var replyList = document.getElementById('reply-list-' + commentId);
// 如果回复列表已经显示,则隐藏它;否则显示它
if (replyList.style.display === 'block') {
replyList.style.display = 'none';
} else {
replyList.style.display = 'block';
}
});
});
</script>
</body>
</html>
```
在这个示例中,我们在每条评论后添加了一个“查看回复”链接,用户点击它可以展开或收起回复列表。每个链接都有一个`data-comment-id`属性,指定它所在的评论ID。
回复列表使用一个无序列表来展示,每个回复都是一个列表项。我们使用了CSS样式来美化回复列表和链接。
在JavaScript代码部分,我们使用了一个事件监听器来处理“查看回复”链接的点击事件。当用户点击链接时,它所在的评论ID和回复列表被提取出来,如果回复列表已经显示,则隐藏它;否则显示它。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)