跳转和选择展示相应内容"/>
三级菜单：有滚动跳转和选择展示相应内容
效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页）
代码如下，可直接复制粘贴查看效果
<!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 奥迪</a><a onclick="showRight('2')">B 比亚迪</a><a onclick="showRight('3')">B 宝马</a><a onclick="showRight('4')">B 标志</a><a onclick="showRight('5')">B 奔驰</a><a onclick="showRight('6')">B 别克</a><a onclick="showRight('7')">B 保时捷</a><a onclick="showRight('8')">B 奔腾</a><a onclick="showRight('9')" id="b">B 本田</a><a onclick="showRight('10')">C 长安轿车</a><a onclick="showRight('11')" id="c">C 长城</a><a onclick="showRight('12')">D 大众</a><a onclick="showRight('13')" id="d">D 道奇</a><a onclick="showRight('14')">F 丰田</a><a onclick="showRight('15')">F 福特</a><a onclick="showRight('16')">F 菲亚特</a><a onclick="showRight('17')" id="f">F 法拉利</a><a onclick="showRight('18')">G GMC</a><a onclick="showRight('19')">G 观致汽车</a><a onclick="showRight('20')" id="g">G 广汽</a><a onclick="showRight('21')">H 华泰</a><a onclick="showRight('22')">H 红旗</a><a onclick="showRight('23')" id="h">H 哈弗</a><a onclick="showRight('24')">J 捷豹</a><a onclick="showRight('25')">J 吉利帝豪</a><a onclick="showRight('26')">J Jeep</a><a onclick="showRight('27')">J 江淮</a><a onclick="showRight('28')" id="j">J 江铃</a><a onclick="showRight('29')">K 凯迪拉克</a><a onclick="showRight('30')" id="k">K 克莱斯勒</a><a onclick="showRight('31')">L 兰博基尼</a><a onclick="showRight('32')">L 雷克萨斯</a><a onclick="showRight('33')">L 铃木</a><a onclick="showRight('34')">L 猎豹汽车</a><a onclick="showRight('35')">L 林肯</a><a onclick="showRight('36')">L 路虎</a><a onclick="showRight('37')" id="l">L 雷诺</a><a onclick="showRight('38')">M 马自达</a><a onclick="showRight('39')">M MG</a><a onclick="showRight('40')" id="m">M MINI</a><a onclick="showRight('41')" id="n">N 纳智捷</a><a onclick="showRight('42')">O 欧宝</a><a onclick="showRight('43')" id="o">O 讴歌</a><a onclick="showRight('44')" id="q">Q 起亚</a><a onclick="showRight('45')">R 荣威</a><a onclick="showRight('46')" id="r">R 日产</a><a onclick="showRight('47')">S 斯柯达</a><a onclick="showRight('48')">S 斯巴鲁</a><a onclick="showRight('49')">S Smart</a><a onclick="showRight('50')" id="s">S 三菱</a><a onclick="showRight('51')" id="w">W 沃尔沃</a><a onclick="showRight('52')">X 雪佛兰</a><a onclick="showRight('53')">X 雪铁龙</a><a onclick="showRight('54')" id="x">X 现代</a><a onclick="showRight('55')">Y 野马汽车</a><a onclick="showRight('56')" id="y">Y 英菲迪尼</a><a onclick="showRight('57')">Z 中华</a><a onclick="showRight('58')" id="z">Z 众泰</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>
更多推荐
三级菜单：有滚动跳转和选择展示相应内容
发布评论