Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "using java to realize the left commodity classification menu of e-commerce". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implementation of commodity classification menu on the left side of e-commerce

Whether it is PC or mobile, there is a function page similar to the category on the left, which is clicked on the right to switch the content.

To achieve this function, the first step is to master the method of left and right layout.

Left and right layout

Flex flexible layout is recommended

.parent {display: flex;}. Left {width: 200px; height: 100%; background-color: red;}. Right {display: flex; flex: 1; height: 100%; background-color: blue;}

You can also use absolute positioning and adjust the position through left.

Then render the menu on the left {{item.text}}

Add a click event to the menu, and pass in the relevant parameters to get the content on the right.

Handle the display on the right in the click event. The complete code is as follows:

Left commodity classification menu html {color:#000;background:#FFF} body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,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} h2,h3,h4,h5,h6,h7 {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 h4 {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 # 8A0E00alternate backgroundfrog FDF5F5BackgroundPartition FDF5F5positionlechangleftlt200pxindexdevl 40pxindexlv;} .pop-category. Sub-item {width:390px;height:350px All commodity categories {{item.text}} trendy clothing, boutique shoes, bags, beauty, skin care, jewelry, sports, outdoor mobile phones, digital home appliances, home appliances, home furnishings, mother and baby products Food Health new Vue ({el:'# test' Data: {category: [{text: "Fashion", id: "a"}, {text: "boutique shoes bag", id: "b"}, {text: "Beauty and skin Care" Id: "c"}, {text: "Jewelry", id: "d"}, {text: "Sports Outdoor", id: "e"}, {text: "Mobile Digital" Id: "f"}, {text: "Home Life", id: "g"}, {text: "Home Appliances", id: "h"}, {text: "Maternal and Child products" Id: "I"}, {text: "Food Health Care", id: "j"}]}, mounted: function () {this.init () }, methods: {init () {/ / TODO initialization data}, clickme (id) {var subItems = document.getElementsByClassName ('sub-item',' div'); for (var j = 0; j < subItems.length) Console.log +) {subitems [j] .style.display = 'none';} const ele = document.getElementById (id) console.log (id, ele) display =' block';})

This is the end of the content of "realizing the left commodity classification menu of e-commerce with java". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.