有四个按钮,当按下第一个按钮时出现图片和文字以及图标,以此类推。且利用HTML CSS JavaScript
时间: 2024-09-09 09:02:26 浏览: 40
在HTML、CSS和JavaScript中创建这样的功能,你可以通过结合这三种技术来实现。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>按钮点击效果</title>
<style>
.button-container {
display: flex;
}
button {
margin: 5px;
padding: 10px 20px;
border: none;
cursor: pointer;
background-color: #ccc;
}
.content {
display: none;
text-align: center;
}
.active {
display: block;
}
</style>
</head>
<body>
<div class="button-container">
<button onclick="showContent(1)">按钮1 (图片1)</button>
<button onclick="showContent(2)">按钮2 (图片2)</button>
<button onclick="showContent(3)">按钮3 (图片3)</button>
<button onclick="showContent(4)">按钮4 (图片4)</button>
</div>
<div id="content1" class="content active">
<img src="image1.jpg" alt="图片1"> 文字1 <br> 图标1
</div>
<div id="content2" class="content">
<img src="image2.jpg" alt="图片2"> 文字2 <br> 图标2
</div>
<div id="content3" class="content">
<img src="image3.jpg" alt="图片3"> 文字3 <br> 图标3
</div>
<div id="content4" class="content">
<img src="image4.jpg" alt="图片4"> 文字4 <br> 图标4
</div>
<script>
function showContent(index) {
var contents = document.getElementsByClassName('content');
for (var i = 0; i < contents.length; i++) {
contents[i].classList.remove('active');
}
var content = document.getElementById("content" + index);
content.classList.add('active');
}
</script>
</body>
</html>
```
在这个例子中,每个按钮都有一个`onclick`事件处理器,当点击时会调用`showContent`函数并传入对应的索引。这个函数会隐藏所有内容区域,并显示传递的索引对应的区域。
阅读全文