page-container内点击出现样式指定
时间: 2023-08-02 22:06:22 浏览: 48
可以使用CSS来为page-container内的元素添加点击出现样式。以下是一个简单的示例:
HTML代码:
```html
<div class="page-container">
<h1>标题</h1>
<p>第一段内容</p>
<p>第二段内容</p>
<p>第三段内容</p>
</div>
```
CSS代码:
```css
.page-container p {
padding: 10px;
border: 1px solid #ccc;
}
.page-container p.active {
background-color: #f00;
color: #fff;
border-color: #f00;
}
```
JavaScript代码:
```javascript
var container = document.querySelector('.page-container');
var paragraphs = container.querySelectorAll('p');
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].addEventListener('click', function() {
// 移除所有段落元素的active类
for (var j = 0; j < paragraphs.length; j++) {
paragraphs[j].classList.remove('active');
}
// 为当前段落元素添加active类
this.classList.add('active');
});
}
```
上述代码中,首先定义了两个CSS类,分别用于设置段落元素的默认样式和点击出现样式。然后使用JavaScript为每个段落元素添加点击事件,在点击事件中,先移除所有段落元素的active类,然后为当前段落元素添加active类。这样就能够实现点击出现样式指定的效果了。