导航栏的效果-优快云博客

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<style>
/* 样式可以根据需要自行修改 */
body {
margin: 0;
padding: 0;
font-family:" Arial, sans-serif";
}

.sidebar {
position: fixed;
left: 0;
top: 0;
width: 80px;
height: 100%;
background-color: #333;
color: #fff;
}

.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar li {
padding: 20px 0;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}

.sidebar li:hover {
background-color: #555;
}

.sidebar a {
color: #fff;
text-decoration: none;
}

.content {
margin-left: 80px;
padding: 20px;
background-color: #f9f9f9;
}

.active {
background-color: #555;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li class="nav-item active" data-tab="home"><i class="fas fa-home"></i></li>
<li class="nav-item" data-tab="inbox"><i class="fas fa-envelope"></i></li>
<li class="nav-item" data-tab="stats"><i class="fas fa-chart-bar"></i></li>
<li class="nav-item" data-tab="settings"><i class="fas fa-cog"></i></li>
</ul>
</div>
<div class="content">
<div id="home" class="tab-content">

</div>
<div id="inbox" class="tab-content">

</div>
<div id="stats" class="tab-content">

</div>
<div id="settings" class="tab-content">

</div>
</div>

navItems.forEach(function(navItem) {
navItem.addEventListener('click', function() {
// 移除所有 active 类
navItems.forEach(function(item) {
item.classList.remove('active');
});

// 添加当前点击的导航项目 active 类
this.classList.add('active');

// 隐藏所有内容
tabContents.forEach(function(content) {
content.style.display = 'none';
});

// 显示当前点击导航项目对应的内容
const tabId = this.getAttribute('data-tab');
const tabContent = document.getElementById(tabId);
tabContent.style.display = 'block';
});
});
</script>
</body>
</html>