写一份科幻感的选项卡代码
时间: 2023-12-01 13:04:43 浏览: 27
以下是一个简单的科幻风格的选项卡代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>科幻选项卡</title>
<style type="text/css">
body {
background-color: #121212;
color: #fff;
font-family: Arial, sans-serif;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tab-button {
background-color: #1c1c1c;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
font-size: 16px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 5px;
margin-bottom: -1px;
}
.tab-button.active {
background-color: #f44336;
color: #fff;
}
</style>
</head>
<body>
<div class="tab-buttons">
<button class="tab-button active" data-tab="tab1">第一个选项卡</button>
<button class="tab-button" data-tab="tab2">第二个选项卡</button>
<button class="tab-button" data-tab="tab3">第三个选项卡</button>
</div>
<div class="tab-content">
<div class="tab active" id="tab1">
<h2>第一个选项卡</h2>
<p>这是第一个选项卡的内容。</p>
</div>
<div class="tab" id="tab2">
<h2>第二个选项卡</h2>
<p>这是第二个选项卡的内容。</p>
</div>
<div class="tab" id="tab3">
<h2>第三个选项卡</h2>
<p>这是第三个选项卡的内容。</p>
</div>
</div>
<script type="text/javascript">
var tabButtons = document.querySelectorAll(".tab-button");
var tabContents = document.querySelectorAll(".tab");
function showTab(tabIndex) {
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
tabButtons[tabIndex].classList.add("active");
tabContents[tabIndex].classList.add("active");
}
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].addEventListener("click", function() {
showTab(Array.prototype.indexOf.call(tabButtons, this));
});
}
showTab(0);
</script>
</body>
</html>
```
该代码使用红色的活动选项卡按钮和白色的选项卡内容,背景为黑色。选项卡按钮被单击时,相应的选项卡内容会显示在页面上。您可以根据需要进行更改以创建适合您项目的选项卡风格。