js简单的详情页切换
时间: 2023-09-16 15:07:35 浏览: 43
可以使用原生 JavaScript 来实现简单的详情页切换,以下是一个示例代码:
HTML:
```
<div class="detail-switch">
<button class="btn-active" data-target="#detail1">商品详情</button>
<button data-target="#detail2">规格参数</button>
<button data-target="#detail3">售后保障</button>
</div>
<div class="detail-content">
<div class="detail-item active" id="detail1">
<p>这是商品详情内容</p>
</div>
<div class="detail-item" id="detail2">
<p>这是规格参数内容</p>
</div>
<div class="detail-item" id="detail3">
<p>这是售后保障内容</p>
</div>
</div>
```
JavaScript:
```
var switchBtns = document.querySelectorAll('.detail-switch button');
var detailItems = document.querySelectorAll('.detail-content .detail-item');
for (var i = 0; i < switchBtns.length; i++) {
switchBtns[i].addEventListener('click', function() {
// 切换按钮样式
for (var j = 0; j < switchBtns.length; j++) {
switchBtns[j].classList.remove('btn-active');
}
this.classList.add('btn-active');
// 切换详情内容
var target = this.getAttribute('data-target');
for (var k = 0; k < detailItems.length; k++) {
detailItems[k].classList.remove('active');
}
document.querySelector(target).classList.add('active');
});
}
```
CSS:
```
.detail-content .detail-item {
display: none;
}
.detail-content .active {
display: block;
}
```
注意:以上代码没有使用任何库,是原生 JavaScript 实现的。
相关推荐
![](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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)