HTML switch 是一个在网页中切换不同内容的*。
HTML switch 是通过使用HTML和CSS来创建的。它由HTML中的一组按钮和对应的内容块组成。当用户点击按钮时,相应的内容块会显示,其他内容块则隐藏。
下面是一个简单的例子:
```html
.switch-container {
text-align: center;
}
.switch {
display: inline-block;
background-color: #ccc;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
}
.switch.active {
background-color: #f00;
color: #fff;
}
.content-block {
display: none;
padding: 20px;
margin-top: 20px;
}
.content-block.active {
display: block;
}
function showContent(index) {
var switches = document.querySelectorAll('.switch');
var contentBlocks = document.querySelectorAll('.content-block');
// 将所有按钮和内容块的 active 类移除
for (var i = 0; i < switches.length; i++) {
switches[i].classList.remove('active');
}
for (var i = 0; i < contentBlocks.length; i++) {
contentBlocks[i].classList.remove('active');
}
// 将点击的按钮和对应的内容块设置为 active
switches[index].classList.add('active');
contentBlocks[index].classList.add('active');
}
```
这是一个简单的HTML switch *,它由一个容器和一组按钮和内容块组成。按钮使用CSS样式来设置样式,通过点击来触发showContent函数。showContent函数根据按钮的索引来切换内容块的显示。点击按钮会将所有按钮和内容块的active类移除,然后将点击的按钮和对应的内容块设置为active类,从而实现显示和隐藏内容块的切换。
可以根据需要自定义样式和内容块的数量。此外,还可以添加更多的交互效果和动画效果来提升用户体验。
HTML switch 可以应用于不同场景,比如切换不同的页面、显示不同的信息或选项卡等。它是一个简单且实用的*,可以使网页更具交互性和可操作性。