你需要在 HTML 和 JavaScript 中实现一个选项卡(
tab)
切换功能。这个功能可以通过以下步骤实现：
1. HTML 结构：创建一个包含多个选项卡的
标签栏(
tab bar)，每个选项卡都应该有一个唯一的标识符(id)。对应的选项卡内容可以用 div
标签来实现，每个 div 应该与其对应的选项卡具有相同的 id 值。
```html
<div class="
tab">
<button class="
tablinks" onclick="open
Tab(event, '
tab1')">
Tab 1</button>
<button class="
tablinks" onclick="open
Tab(event, '
tab2')">
Tab 2</button>
<button class="
tablinks" onclick="open
Tab(event, '
tab3')">
Tab 3</button>
</div>
<div id="
tab1" class="
tabcontent">
<h3>
Tab 1 Content</h3>
<p>Some content for
Tab 1.</p>
</div>
<div id="
tab2" class="
tabcontent">
<h3>
Tab 2 Content</h3>
<p>Some content for
Tab 2.</p>
</div>
<div id="
tab3" class="
tabcontent">
<h3>
Tab 3 Content</h3>
<p>Some content for
Tab 3.</p>
</div>
```
2.
CSS 样式：定义选项卡和选项卡内容的样式，使其在页面中正确地显示。
```
css
/* 隐藏所有选项卡内容 */
.
tabcontent {
display: none;
}
/* 定义选项卡按钮的样式 */
.
tablinks {
background-color: #ddd;
color: #333;
border: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
}
/* 定义选项卡按钮被选中
时的样式 */
.
tablinks.active {
background-color: #fff;
color: #000;
}
/* 定义选项卡内容的样式 */
.
tabcontent {
padding: 20px;
}
```
3. JavaScript 代码：编写一个函数来打开选项卡内容。该函数应该接受两个参数：事件对象和选项卡名称。在函数内部，首先关闭所有选项卡内容，然后显示当前选项卡的内容。
```javascript
function open
Tab(evt,
tabName) {
// 获取所有选项卡内容并隐藏它们
var
tabcontent = document.getElementsByClassName("
tabcontent");
for (var i = 0; i <
tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// 获取所有选项卡按钮并将其设置为非激活状态
var
tablinks = document.getElementsByClassName("
tablinks");
for (var i = 0; i <
tablinks.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" active", "");
}
// 显示当前选项卡内容并将选项卡按钮设置为激活状态
document.getElementById(
tabName).style.display = "block";
evt.currentTarget.className += " active";
}
```
4. 将 JavaScript 函数绑定到选项卡按钮的
点击事件上。
```html
<button class="
tablinks" onclick="open
Tab(event, '
tab1')">
Tab 1</button>
```
现在，当用户
点击选项卡按钮
时，JavaScript 函数将会打开对应的选项卡内容。
2666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
