菜单切换效果_水平菜单分类切换是什么样的-CSDN博客

本文链接：https://blog.csdn.net/2402_83286556/article/details/137729889

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜单切换示例</title>
<style>
.menu {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
padding: 10px;
}
.menu-item {
cursor: pointer;
background-color: #ccc;
padding: 5px 10px;
border-radius: 5px;
transition: all 0.3s ease; /* 添加过渡效果 */
}
.content {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item" οnclick="switchContent(0)">菜单1</div>
<div class="menu-item" οnclick="switchContent(1)">菜单2</div>
<div class="menu-item" οnclick="switchContent(2)">菜单3</div>
<div class="menu-item" οnclick="switchContent(3)">菜单4</div>
</div>
<div class="content active" id="content0">内容1</div>
<div class="content" id="content1">内容2</div>
<div class="content" id="content2">内容3</div>
<div class="content" id="content3">内容4</div>
<script>
function switchContent(index) {
var contents = document.getElementsByClassName('content');
for (var i = 0; i < contents.length; i++) {
contents[i].classList.remove('active');
}
contents[index].classList.add('active');

var menuItems = document.getElementsByClassName('menu-item');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].style.backgroundColor = '#ccc';
menuItems[i].style.transform = 'translateX(0)'; // 重置位置
}
menuItems[index].style.backgroundColor = '#add8e6'; // 将背景颜色更改为浅蓝色（#add8e6）
menuItems[index].style.transform = 'translateX(10px)'; // 设置位置偏移量
setTimeout(function() {
menuItems[index].style.transform = 'translateX(0)'; // 恢复位置
}, 300); // 延迟300毫秒后执行恢复位置的操作
}
</script>
</body>
</html>