这是icon图标侧边导航栏，不同的效果

最新推荐文章于 2024-08-22 11:06:05 发布

李浩东@

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量77

点赞数

分类专栏：付费文章标签：前端

本文链接：https://blog.csdn.net/m0_64180190/article/details/133128160

版权

付费专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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;
display: flex;
flex-direction: column;
align-items: center;
}

.sidebar.open {
width: 250px;
}

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

.sidebar li {
width: 100%;
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;
}

.sidebar .icon {
font-size: 24px;
margin-bottom: 5px;
}

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

.content.open {
margin-left: 250px;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
<ul>
<li class="nav-item active" data-tab="home"><i class="fas fa-home icon"></i> Home</li>
<li class="nav-item" data-tab="inbox"><i class="fas fa-envelope icon"></i> Inbox</li>
<li class="nav-item" data-tab="stats"><i class="fas fa-chart-bar icon"></i> Stats</li>
<li class="nav-item" data-tab="settings"><i class="fas fa-cog icon"></i> Settings</li>
</ul>
</div>
<div class="content" id="content">
<div id="home" class="tab-content active">
<h2>Home</h2>

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

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

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

</div>
</div>

document.addEventListener('click', function(event) {
const target = event.target;

if (!target.closest('#sidebar') && !target.closest('#content') && sidebar.classList.contains('open')) {
sidebar.classList.remove('open');
content.classList.remove('open');
}
});

sidebar.addEventListener('click', function(event) {
event.stopPropagation();
});

sidebar.addEventListener('click', function() {
sidebar.classList.toggle('open');
content.classList.toggle('open');
});

const navItems = document.querySelectorAll('.nav-item');
const tabContents = document.querySelectorAll('.tab-content');

navItems.forEach(function(navItem) {
navItem.addEventListener('click', function() {
if (!this.classList.contains('active')) { // 只有当导航项不为活动状态时才切换
// 移除所有 active 类
navItems.forEach(function(item) {
item.classList.remove('active');
});

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

// 隐藏所有内容
tabContents.forEach(function(content) {
content.classList.remove('active');
});

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

李浩东@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
这是icon图标侧边导航栏，不同的效果

this.classList.contains('active')) { // 只有当导航项不为活动状态时才切换。// 添加当前点击的导航项目 active 类。// 显示当前点击导航项目对应的内容。-- settings 内容 -->// 移除所有 active 类。-- inbox 内容 -->-- stats 内容 -->/* 样式可以根据需要自行修改 */-- home 内容 -->
复制链接

扫一扫