我要table栏切换代码
时间: 2023-06-12 20:07:11 浏览: 60
以下是一个简单的 table 栏切换代码,你可以根据自己的需求进行修改和优化:
HTML:
```html
<div class="tab">
<button class="tab-button active" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tab-button" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tab-button" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
<div id="tab1" class="tab-content active">Tab 1 Content</div>
<div id="tab2" class="tab-content">Tab 2 Content</div>
<div id="tab3" class="tab-content">Tab 3 Content</div>
```
CSS:
```css
.tab {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab-button {
background-color: #eee;
border: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px 5px 0 0;
}
.tab-button:hover {
background-color: #ddd;
}
.tab-button.active {
background-color: #fff;
border-bottom: 2px solid #333;
}
.tab-content {
display: none;
padding: 20px;
border: 2px solid #333;
border-top: none;
}
.tab-content.active {
display: block;
}
```
JavaScript:
```javascript
function openTab(evt, tabName) {
var i, tabcontent, tabbuttons;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tabbuttons = document.getElementsByClassName("tab-button");
for (i = 0; i < tabbuttons.length; i++) {
tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
```
以上代码实现了一个简单的 table 栏切换,可以通过点击不同的标签来显示不同的内容。你可以根据自己的需求进行修改和优化。