我要问DW html怎么写出tab菜单栏设计 我需要代码
时间: 2024-03-11 07:47:00 浏览: 19
好的,以下是一个简单的HTML代码示例,可以实现一个基本的tab菜单栏设计:
```html
<!DOCTYPE html>
<html>
<head>
<title>Tab Menu</title>
<style type="text/css">
/* 隐藏所有tab内容 */
.tab-content {
display: none;
}
/* 显示当前选中的tab内容 */
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
<div id="tab1" class="tab-content active">
<p>这是 Tab 1 的内容。</p>
</div>
<div id="tab2" class="tab-content">
<p>这是 Tab 2 的内容。</p>
</div>
<div id="tab3" class="tab-content">
<p>这是 Tab 3 的内容。</p>
</div>
<script type="text/javascript">
function openTab(evt, tabName) {
var i, tabContent, tablinks;
tabContent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].className = tabContent[i].className.replace(" active", "");
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).className += " active";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
```
你可以将以上代码复制到一个HTML文件中,并在浏览器中打开该文件,以查看效果。