JS 实现顶部 TAB 导航栏：鼠标悬浮、点击特效
你可以使用如下的代码来实现一个简单的顶部TAB导航栏网页：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>TAB导航栏</title>
<style>
.tab {
display: inline-block;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.tab:hover {
background-color: #999;
}
.active {
background-color: #0f0;
}
.content {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="tabs">
<div class="tab" onclick="changeTab(0)">Tab 1</div>
<div class="tab" onclick="changeTab(1)">Tab 2</div>
<div class="tab" onclick="changeTab(2)">Tab 3</div>
</div>
<div id="content" class="content">
<p>This is the content for Tab 1.</p>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript代码（script.js）：
function changeTab(tabIndex) {
var tabs = document.getElementsByClassName('tab');
var content = document.getElementById('content');
// 移除之前选中的tab的active类
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
}
// 添加当前选中的tab的active类
tabs[tabIndex].classList.add('active');
// 根据选中的tabIndex显示不同的内容
if (tabIndex === 0) {
content.innerHTML = '<p>This is the content for Tab 1.</p>';
} else if (tabIndex === 1) {
content.innerHTML = '<p>This is the content for Tab 2.</p>';
} else if (tabIndex === 2) {
content.innerHTML = '<p>This is the content for Tab 3.</p>';
}
}
以上代码实现了一个具有三个TAB的顶部导航栏。当点击不同的TAB时，会出现不同的文字内容，鼠标悬浮时有灰色背景，鼠标点击时有绿色背景。你可以根据需要修改内容和样式。
原文地址: https://www.cveoy.top/t/topic/pxhC 著作权归作者所有。请勿转载和采集!