溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

用java實(shí)現(xiàn)電商左側(cè)商品分類菜單

發(fā)布時(shí)間：2021-06-26 14:03:18 來(lái)源：億速云 閱讀：123 作者：chen 欄目：大數(shù)據(jù)

本篇內(nèi)容介紹了“用java實(shí)現(xiàn)電商左側(cè)商品分類菜單”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

電商左側(cè)商品分類菜單實(shí)現(xiàn)

無(wú)論是pc端還是手機(jī)端，都有類似左側(cè)分類，點(diǎn)擊后右側(cè)切換內(nèi)容的功能頁(yè)面。

要想實(shí)現(xiàn)這個(gè)功能，首先第一步是要掌握左右布局的方法。

左右布局

推薦使用flex彈性布局

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

也可以使用absolute定位，通過(guò)left調(diào)整位置。

之后渲染左側(cè)的菜單

<ul id="J_category" class="item">
    <li v-for="item in category"  @click="clickme(item.id)">{{ item.text }}</li>
</ul>

在菜單中添加點(diǎn)擊事件，點(diǎn)擊事件中傳入相關(guān)的參數(shù)用于獲取右側(cè)內(nèi)容。

在點(diǎn)擊事件中處理右側(cè)的顯示內(nèi)容，完整代碼如下：

<!DOCTYPE html>

<head>
   <title>左側(cè)商品分類菜單</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,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 #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">
      <h4>所有商品分類</h4>
      <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">美容護(hù)膚</div>
         <div class='sub-item' style='display:none;' id="d">珠寶飾品</div>
         <div class='sub-item' style='display:none;' id="e">運(yùn)動(dòng)戶外</div>
         <div class='sub-item' style='display:none;' id="f">手機(jī)數(shù)碼</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: "美容護(hù)膚",
               id: "c"
            }, {
               text: "珠寶飾品",
               id: "d"
            }, {
               text: "運(yùn)動(dòng)戶外",
               id: "e"
            }, {
               text: "手機(jī)數(shù)碼",
               id: "f"
            }, {
               text: "居家生活",
               id: "g"
            }, {
               text: "家電家裝",
               id: "h"
            }, {
               text: "母嬰用品",
               id: "i"
            }, {
               text: "食品保健",
               id: "j"
            }]
         },
         mounted: function () {
            this.init();
         },
         methods: {
            init() {
               // TODO 初始化數(shù)據(jù)
            },
            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>

用java實(shí)現(xiàn)電商左側(cè)商品分類菜單

“用java實(shí)現(xiàn)電商左側(cè)商品分類菜單”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手