本文介绍了电商网站中常见的左侧商品分类菜单的实现方法，包括使用flex弹性布局或absolute定位来创建左右布局，以及如何在菜单点击事件中处理右侧内容的切换，详细代码示例提供了实现思路。
电商左侧商品分类菜单实现
无论是pc端还是手机端，都有类似左侧分类，点击后右侧切换内容的功能页面。
要想实现这个功能，首先第一步是要掌握左右布局的方法。
左右布局
推荐使用flex弹性布局
.parent {
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: red;
}
.right {
display: flex;
flex: 1;
height: 100%;
background-color: blue;
}也可以使用absolute定位，通过left调整位置。
之后渲染左侧的菜单
<ul id="J_category" class="item">
<li v-for="item in category" @click="clickme(item.id)">{
{ item.text }}</li>
</ul>在菜单中添加点击事件，点击事件中传入相关的参数用于获取右侧内容。
在点击事件中处理右侧的显示内容，完整代码如下：
<!DOCTYPE html>
<head>
<title>左侧商品分类菜单</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
&l
最低0.47元/天 解锁文章
扫一扫
3910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
