使用flex布局实现底部导航栏
时间: 2023-11-30 14:42:10 浏览: 35
使用flex布局实现底部导航栏的步骤如下:
1. HTML结构
```html
<div class="nav">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">分类</a>
<a href="#" class="nav-item">购物车</a>
<a href="#" class="nav-item">我的</a>
</div>
```
2. CSS样式
```css
.nav {
display: flex;
justify-content: space-between; align-items: center;
height: 50px;
background-color: #f5f5f5;
padding: 0 10px;
}
.nav-item {
flex: 1;
text-align: center;
color: #666;
text-decoration: none;
font-size: 14px;
line-height: 50px;
}
.nav-item.active {
color: #ff6600;
}
```
3. JS交互
```javascript
// 获取所有导航项
var navItems = document.querySelectorAll('.nav-item');
// 给每个导航项添加点击事件
navItems.forEach(function(item) {
item.addEventListener('click', function() {
// 移除所有导航项的active类名
navItems.forEach(function(item) {
item.classList.remove('active');
});
// 给当前点击的导航项添加active类名
this.classList.add('active');
});
});
```