Categories menu on the left side electricity supplier to achieve
Whether pc side or end of the phone, the left has a similar classification, function switch on the right page content when clicked.
To achieve this, the first step is to master the first method about the layout.
About layout
Recommended to use flex elastic layout
.parent {
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: red;
}
.right {
display: flex;
flex: 1;
height: 100%;
background-color: blue;
}Absolute positioning may be used to adjust the position by the left.
After rendering menu on the left
<ul id="J_category" class="item">
<li v-for="item in category" @click="clickme(item.id)">{{ item.text }}</li>
</ul>Click on the menu to add an event, click the event passed the relevant parameters used to obtain the right side of the content.
Display content processing on the right side of the click event, complete code is as follows:
<!DOCTYPE html>
<head>
<title>左侧商品分类菜单</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<style>html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
.sub-col{position:relative;z-index:999;}
.category{width:230px;border:1px solid #8A0E00;}
.category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;}
.category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) no-repeat 205px center;border-bottom:1px solid #ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;}
.category ul li:hover{background-color:#8A0E00;color:#fff;}
.pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;}
.pop-category .sub-item{width:390px;height:350px;}
</style>
<div class="category" id="test">
<h3>所有商品分类</h3>
<ul id="J_category" class="item">
<li v-for="item in category" @click="clickme(item.id)">{{ item.text }}</li>
</ul>
<div id="J_popCategory" class="pop-category">
<div class='sub-item' style='display:none;' id="a">潮流服饰</div>
<div class='sub-item' style='display:none;' id="b">精品鞋包</div>
<div class='sub-item' style='display:none;' id="c">美容护肤</div>
<div class='sub-item' style='display:none;' id="d">珠宝饰品</div>
<div class='sub-item' style='display:none;' id="e">运动户外</div>
<div class='sub-item' style='display:none;' id="f">手机数码</div>
<div class='sub-item' style='display:none;' id="g">居家生活</div>
<div class='sub-item' style='display:none;' id="h">家电家装</div>
<div class='sub-item' style='display:none;' id="i">母婴用品</div>
<div class='sub-item' style='display:none;' id="j">食品保健</div>
</div>
</div>
<script>
new Vue({
el: '#test',
data: {
category: [{
text: "潮流服饰",
id: "a"
}, {
text: "精品鞋包",
id: "b"
}, {
text: "美容护肤",
id: "c"
}, {
text: "珠宝饰品",
id: "d"
}, {
text: "运动户外",
id: "e"
}, {
text: "手机数码",
id: "f"
}, {
text: "居家生活",
id: "g"
}, {
text: "家电家装",
id: "h"
}, {
text: "母婴用品",
id: "i"
}, {
text: "食品保健",
id: "j"
}]
},
mounted: function () {
this.init();
},
methods: {
init() {
// TODO 初始化数据
},
clickme(id) {
var subItems = document.getElementsByClassName('sub-item', 'div');
for (var j = 0; j < subItems.length; j++) {
subItems[j].style.display = 'none';
}
const ele = document.getElementById(id)
console.log(id, ele)
ele.style.display = 'block';
}
}
})
</script>
</body>
</html>
Like turn commentary is the greatest encouragement
