2. IT
    3. 三级菜单：有滚动跳转和选择展示相应内容

    三级菜单：有滚动跳转和选择展示相应内容

    xiaoxiao2025-08-11  7

    效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页）

    代码如下，可直接复制粘贴查看效果

     

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .more{ width:570px; height:315px; background:white; border:1px solid darkgray; margin:100px auto; overflow:hidden; } a:hover{ cursor:pointer; } ul li{ list-style-type:none; } #more-left,#more-middle,#more-right{ height:100%; float:left; } #more-left{ width:20px; background-color:lightgray; } #more-left ul{ width:20px; height:315px; } #more-left ul li{ width:20px; height:15.7px; } #more-left ul li a{ display:block; width:20px; height:15.7px; font-size:12px; color:black; text-align:center; line-height:15.7px; } #more-left ul li a:hover{ background-color:#e64346; color:white; } #more-middle{ width:120px; background-color:ghostwhite; overflow-y: scroll; overflow-x:hidden; } #more-middle a{ display:block; width:120px; height:27px; line-height:27px; text-indent:1em; color:black; font-size:12px; } #more-middle a:hover{ background-color:#e64346; color:white; } #more-middle a:active{ background-color:#e64346; } #a,#b,#c,#d,#g,#h,#j,#k,#l,#m,#n,#o,#q,#r,#s,#w,#x,#y,#z{ border-bottom:1px solid lightgray; } #more-right{ width:410px; background-color:ghostwhite; color:gray; font-size:10px; padding-left:20px; padding-top:20px; } #more-right p{ height:20px; line-height:20px; color:gray; font-size:10px; } #more-right p a{ display:block; color:gray; font-size:10px; font-weight:normal; float:left; margin-right:15px; height:20px; line-height:20px; text-align:center; } #more-right p a:hover{ background-color:crimson; color:white; } </style> </head> <body> <div class="more"> <div id="more-left"> <ul id="scroll"> <li><a alt="1" onclick="scrollTo(this);">A</a></li> <li><a alt="2" onclick="scrollTo(this);">B</a></li> <li><a alt="10" onclick="scrollTo(this);">C</a></li> <li><a alt="12" onclick="scrollTo(this);">D</a></li> <li><a alt="14" onclick="scrollTo(this);">F</a></li> <li><a alt="18" onclick="scrollTo(this);">G</a></li> <li><a alt="21" onclick="scrollTo(this);">H</a></li> <li><a alt="24" onclick="scrollTo(this);">J</a></li> <li><a alt="29" onclick="scrollTo(this);">K</a></li> <li><a alt="31" onclick="scrollTo(this);">L</a></li> <li><a alt="38" onclick="scrollTo(this);">M</a></li> <li><a alt="41" onclick="scrollTo(this);">N</a></li> <li><a alt="42" onclick="scrollTo(this);">O</a></li> <li><a alt="44" onclick="scrollTo(this);">Q</a></li> <li><a alt="45" onclick="scrollTo(this);">R</a></li> <li><a alt="47" onclick="scrollTo(this);">S</a></li> <li><a alt="50" onclick="scrollTo(this);">W</a></li> <li><a alt="51" onclick="scrollTo(this);">X</a></li> <li><a alt="54" onclick="scrollTo(this);">Y</a></li> <li><a alt="56" onclick="scrollTo(this);">Z</a></li> </ul> </div> <div id="more-middle"> <a onclick="showRight('0')">热门</a> <a onclick="showRight('1')" id="a">A&nbsp;奥迪</a> <a onclick="showRight('2')">B&nbsp;比亚迪</a> <a onclick="showRight('3')">B&nbsp;宝马</a> <a onclick="showRight('4')">B&nbsp;标志</a> <a onclick="showRight('5')">B&nbsp;奔驰</a> <a onclick="showRight('6')">B&nbsp;别克</a> <a onclick="showRight('7')">B&nbsp;保时捷</a> <a onclick="showRight('8')">B&nbsp;奔腾</a> <a onclick="showRight('9')" id="b">B&nbsp;本田</a> <a onclick="showRight('10')">C&nbsp;长安轿车</a> <a onclick="showRight('11')" id="c">C&nbsp;长城</a> <a onclick="showRight('12')">D&nbsp;大众</a> <a onclick="showRight('13')" id="d">D&nbsp;道奇</a> <a onclick="showRight('14')">F&nbsp;丰田</a> <a onclick="showRight('15')">F&nbsp;福特</a> <a onclick="showRight('16')">F&nbsp;菲亚特</a> <a onclick="showRight('17')" id="f">F&nbsp;法拉利</a> <a onclick="showRight('18')">G&nbsp;GMC</a> <a onclick="showRight('19')">G&nbsp;观致汽车</a> <a onclick="showRight('20')" id="g">G&nbsp;广汽</a> <a onclick="showRight('21')">H&nbsp;华泰</a> <a onclick="showRight('22')">H&nbsp;红旗</a> <a onclick="showRight('23')" id="h">H&nbsp;哈弗</a> <a onclick="showRight('24')">J&nbsp;捷豹</a> <a onclick="showRight('25')">J&nbsp;吉利帝豪</a> <a onclick="showRight('26')">J&nbsp;Jeep</a> <a onclick="showRight('27')">J&nbsp;江淮</a> <a onclick="showRight('28')" id="j">J&nbsp;江铃</a> <a onclick="showRight('29')">K&nbsp;凯迪拉克</a> <a onclick="showRight('30')" id="k">K&nbsp;克莱斯勒</a> <a onclick="showRight('31')">L&nbsp;兰博基尼</a> <a onclick="showRight('32')">L&nbsp;雷克萨斯</a> <a onclick="showRight('33')">L&nbsp;铃木</a> <a onclick="showRight('34')">L&nbsp;猎豹汽车</a> <a onclick="showRight('35')">L&nbsp;林肯</a> <a onclick="showRight('36')">L&nbsp;路虎</a> <a onclick="showRight('37')" id="l">L&nbsp;雷诺</a> <a onclick="showRight('38')">M&nbsp;马自达</a> <a onclick="showRight('39')">M&nbsp;MG</a> <a onclick="showRight('40')" id="m">M&nbsp;MINI</a> <a onclick="showRight('41')" id="n">N&nbsp;纳智捷</a> <a onclick="showRight('42')">O&nbsp;欧宝</a> <a onclick="showRight('43')" id="o">O&nbsp;讴歌</a> <a onclick="showRight('44')" id="q">Q&nbsp;起亚</a> <a onclick="showRight('45')">R&nbsp;荣威</a> <a onclick="showRight('46')" id="r">R&nbsp;日产</a> <a onclick="showRight('47')">S&nbsp;斯柯达</a> <a onclick="showRight('48')">S&nbsp;斯巴鲁</a> <a onclick="showRight('49')">S&nbsp;Smart</a> <a onclick="showRight('50')" id="s">S&nbsp;三菱</a> <a onclick="showRight('51')" id="w">W&nbsp;沃尔沃</a> <a onclick="showRight('52')">X&nbsp;雪佛兰</a> <a onclick="showRight('53')">X&nbsp;雪铁龙</a> <a onclick="showRight('54')" id="x">X&nbsp;现代</a> <a onclick="showRight('55')">Y&nbsp;野马汽车</a> <a onclick="showRight('56')" id="y">Y&nbsp;英菲迪尼</a> <a onclick="showRight('57')">Z&nbsp;中华</a> <a onclick="showRight('58')" id="z">Z&nbsp;众泰</a> </div> <div id="more-right" style="color:gray;"></div> </div> <script src="jquery-1.10.2.min.js"></script> <script> /*根据得到的下标在more-right里插入相应的内容*/ function showRight(index){ var i=parseInt(index); switch (i){ case 0: var c=$("#more-right").empty(); $("<p><a>奥迪：</a><a>A4L</a><a>A6L</a><a>A8L</a><a>Q3</a><a>Q5</a></p>").appendTo("#more-right"); $("<p><a>宝马：</a><a>3系</a><a>5系</a><a>7系</a><a>X1</a><a>X3</a><a>X5</a></p>").appendTo("#more-right"); $("<p><a>别克：</a><a>君越</a><a>凯越</a><a>君威</a><a>英朗GT</a><a>英朗XT</a></p>").appendTo("#more-right"); $("<p><a>大众：</a><a>宝来</a><a>高尔夫</a><a>速腾</a><a>迈腾</a><a>POLO</a><a>CC</a></p>").appendTo("#more-right"); $("<p><a>日产：</a><a>骊威</a><a>天籁</a><a>骐达</a><a>颐达</a><a>逍客</a><a>帕拉丁</a></p>").appendTo("#more-right"); $("<p><a>丰田：</a><a>普拉多</a><a>汉兰达</a><a>凯美瑞</a><a>RAV4</a><a>雅力士</a></p>").appendTo("#more-right"); $("<p><a>本田：</a><a>思域</a><a>CR-V</a><a>雅阁</a><a>奥德赛</a><a>飞度</a><a>锋范</a></p>").appendTo("#more-right"); $("<p><a>现代：</a><a>悦动</a><a>伊兰特</a><a>朗动</a><a>ix35</a><a>途胜</a><a>索纳塔</a></p>").appendTo("#more-right"); $("<p><a>马自达：</a><a>马自达3</a><a>马自达6</a><a>马自达6轿跑</a><a>睿翼</a><a>MPV</a></p>").appendTo("#more-right"); break; case 1: var c=$("#more-right").empty(); $("<p><a>奥迪A4L</a><a>奥迪A6L</a><a>奥迪Q3</a><a>奥迪Q5（进口）</a></p>").appendTo("#more-right"); $("<p><a>奥迪Q7（进口）</a><a>奥迪A8L（进口）</a><a>奥迪A4</a><a>奥迪TT（进口）</a></p>").appendTo("#more-right"); $("<p><a>奥迪A3（进口）</a><a>奥迪A1（进口）</a><a>奥迪A7（进口）</a><a>奥迪Q7</a></p>").appendTo("#more-right"); break; case 2: var c=$("#more-right").empty(); $("<p><a>比亚迪S3</a><a>比亚迪F6</a></p>").appendTo("#more-right"); break; case 3: var c=$("#more-right").empty(); $("<p><a>宝马3系</a><a>宝马5系</a><a>宝马X1</a><a>宝马1系</a></p>").appendTo("#more-right"); $("<p><a> 宝马1系(进口)</a><a>宝马X3(进口)</a><a>宝马3系GT</a><a>宝马5系GT(进口)</a></p>").appendTo("#more-right"); $("<p><a>宝马X5(进口)</a><a>宝马7系(进口)</a><a>宝马X6(进口)</a><a>宝马M3</a></p>").appendTo("#more-right"); $("<p><a> 宝马Z4(进口)</a><a>宝马X3</a></a></p>").appendTo("#more-right"); break; //后面类似，此处先不写了 } } /*得到想到达的元素序号并以此得到要滚动的数值*/ function scrollTo(obj){ var con=$(obj).attr("alt"); var alt=parseInt(con); var tar=alt*27; $("#more-middle").scrollTop(tar); // $("#more-middle").animate({scrollTop:tar},500); } </script> </body> </html>

     

     

     

    转载请注明原文地址: https://ju.6miu.com/read-1301643.html
    最新回复(0)