用html写一个无序列表,每个列表下有div元素,点击时候隐藏或显示div
时间: 2023-05-20 18:06:05 浏览: 67
元素。
可以这样写:
```html
<ul>
<li>
Item 1
<div class="content">Content 1</div>
</li>
<li>
Item 2
<div class="content">Content 2</div>
</li>
<li>
Item 3
<div class="content">Content 3</div>
</li>
</ul>
<style>
.content {
display: none;
}
</style>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', () => {
item.querySelector('.content').classList.toggle('show');
});
});
</script>
```
这样就可以实现点击列表项时显示或隐藏对应的内容了。
相关问题
用html写一个无序列表,每个列表下有div元素,点击时候隐藏或显示div 用js方法实现
### 回答1:
可以使用以下代码实现:
HTML代码:
<ul>
<li>
<span>列表1</span>
<div class="content">内容1</div>
</li>
<li>
<span>列表2</span>
<div class="content">内容2</div>
</li>
<li>
<span>列表3</span>
<div class="content">内容3</div>
</li>
</ul>
CSS代码:
.content {
display: none;
}
JS代码:
var items = document.querySelectorAll('ul li');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var span = item.querySelector('span');
var content = item.querySelector('.content');
span.addEventListener('click', function() {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
}
### 回答2:
要实现点击隐藏或显示div元素,可以通过以下代码实现:
HTML部分:
```html
<ul>
<li onclick="toggleDiv('div1')">列表1
<div id="div1" style="display: none;">隐藏/显示的内容</div>
</li>
<li onclick="toggleDiv('div2')">列表2
<div id="div2" style="display: none;">隐藏/显示的内容</div>
</li>
<li onclick="toggleDiv('div3')">列表3
<div id="div3" style="display: none;">隐藏/显示的内容</div>
</li>
</ul>
```
JavaScript部分:
```javascript
function toggleDiv(divId) {
var div = document.getElementById(divId);
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
```
在上述代码中,通过`onclick`事件绑定了点击列表时调用`toggleDiv`函数,并传入对应的div元素的id作为参数。`toggleDiv`函数通过`getElementById`方法获取到对应的div元素,并判断当前的`display`属性值,如果为`none`则设置为`block`,否则设置为`none`,从而实现点击隐藏或显示的效果。
### 回答3:
HTML代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>无序列表和div元素</title>
<style>
.content {
display: none;
}
</style>
</head>
<body>
<ul>
<li onclick="toggleDiv('div1')">列表项1</li>
<div id="div1" class="content">
这是div1的内容
</div>
<li onclick="toggleDiv('div2')">列表项2</li>
<div id="div2" class="content">
这是div2的内容
</div>
</ul>
<script>
function toggleDiv(elementId) {
var div = document.getElementById(elementId);
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</body>
</html>
```
在上述代码中,我们使用ul标签创建了一个无序列表。每个列表项下面都有一个div元素。在每个列表项的onclick事件中,调用toggleDiv函数,并传入对应的div元素的id作为参数。toggleDiv函数用来切换div元素的显示和隐藏状态。
在页面加载时,我们使用了一段内联CSS样式,将所有的div元素的display属性设置为none,即默认隐藏。
通过JavaScript,我们获取到传入的elementId,然后通过getElementById方法获取对应的div元素。根据div元素的当前display属性的值,我们可以判断当前是否显示,如果是隐藏,则将display属性设置为block显示;如果是显示,则将display属性设置为none隐藏。
这样,点击列表项时,就可以实现对应div元素的显示和隐藏。
利用css+div+javascript编写一个html新闻页面
好的,我可以为你提供一个简单的HTML新闻页面,其中包含一个标题、一些新闻内容和一些相关链接。通过CSS样式,我们可以让页面看起来更加美观和现代化。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>新闻页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
margin: 0 auto;
width: 80%;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
h1 {
font-size: 36px;
margin-bottom: 20px;
color: #333;
}
.news-item {
margin-bottom: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
.news-item h2 {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.news-item p {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 10px;
}
.related-links {
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
.related-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-links li {
margin-bottom: 10px;
}
.related-links a {
font-size: 16px;
color: #333;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.related-links a:hover {
color: #4CAF50;
}
</style>
</head>
<body>
<div class="container">
<h1>今日新闻</h1>
<div class="news-item">
<h2>标题1</h2>
<p>新闻内容1</p>
</div>
<div class="news-item">
<h2>标题2</h2>
<p>新闻内容2</p>
</div>
<div class="news-item">
<h2>标题3</h2>
<p>新闻内容3</p>
</div>
<div class="related-links">
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
</div>
</body>
</html>
```
这个页面包含一个标题、三个新闻内容块和一个相关链接块。每个新闻内容块包含一个标题和一段文本,相关链接块包含一个标题和一个包含链接列表的无序列表。通过CSS样式,我们可以让页面看起来更加美观和现代化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.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)