请帮我写一个js选项卡的例子
时间: 2024-05-01 15:18:32 浏览: 39
好的,以下是一个简单的js选项卡例子:
HTML代码:
```
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</button>
</div>
<div id="tab1" class="tabcontent">
<h3>选项卡1内容</h3>
<p>这里是选项卡1的内容。</p>
</div>
<div id="tab2" class="tabcontent">
<h3>选项卡2内容</h3>
<p>这里是选项卡2的内容。</p>
</div>
<div id="tab3" class="tabcontent">
<h3>选项卡3内容</h3>
<p>这里是选项卡3的内容。</p>
</div>
```
CSS代码:
```
.tabcontent {
display: none;
}
.tablinks {
background-color: #ccc;
border: none;
color: black;
padding: 10px;
}
.tablinks:hover {
background-color: #ddd;
}
.active {
background-color: #fff;
}
```
JavaScript代码:
```
function openTab(event, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
event.currentTarget.className += " active";
}
// 笑话
console.log("为什么学计算机要学多线程?因为你的电脑可能比你还有多线程。");
```