如图，字母这边是一个div，品牌这边是一个div，下面有26个字母的指定的品牌div，现需要实现单击字母，右边也能跳转到字母指定的div。
在右侧设置26个li标签 放这26个字母的品牌 然后把左边的26个字母 用a标签，href就是那26哥li标签的索引，
不知道我这么说你懂了没
和lz所述效果略有不同，不过也差不太多。就是把不相关的隐藏了
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".suoyin li").click(function(){ var key = $(this).html(); if(key == "全部"){ $(".list li").show(); }else{ $(".list li").hide(); $(".list li[data-key="+key+"]").show(); } });});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box"> <ul class="suoyin"> <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li> <li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li> <li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li> <li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li> </ul> <ul class="list"> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥蒂斯</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='D'>D 奥迪</li> <li data-key='D'>D 奥迪</li> <li data-key='E'>E 奥迪</li> <li data-key='F'>F fff</li> <li data-key='G'>G ggggg</li> </ul></div>
在右侧设置26个li标签 放这26个字母的品牌 然后把左边的26个字母 用a标签，href就是那26哥li标签的索引，
不知道我这么说你懂了没
和lz所述效果略有不同，不过也差不太多。就是把不相关的隐藏了
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".suoyin li").click(function(){ var key = $(this).html(); if(key == "全部"){ $(".list li").show(); }else{ $(".list li").hide(); $(".list li[data-key="+key+"]").show(); } });});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box"> <ul class="suoyin"> <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li> <li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li> <li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li> <li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li> </ul> <ul class="list"> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥迪</li> <li data-key='A'>A 奥蒂斯</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='B'>B 保罗</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='C'>C 奥迪</li> <li data-key='D'>D 奥迪</li> <li data-key='D'>D 奥迪</li> <li data-key='E'>E 奥迪</li> <li data-key='F'>F fff</li> <li data-key='G'>G ggggg</li> </ul></div><style type="text/css"> p{line-height:0px;} a{text-decoration:none;color:#000000;} a:hover {color:#FFFFFF;background-color:#FF9933;} #d .province p a{margin-left:5px;line-height:1px;} #d .city p a{margin-left:5px;line-height:1px;} #d .province{border-style:solid; border-width:1px 0px 1px 1px;} #d .city{border-style:solid; border-width:1px 1px 1px 0px;}</style><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script><script type="text/javascript">function xs() { if(d.style.display='none') { d.style.display='block'; } else { d.style.display='none'; }}var province,city;function GetProvince(obj) { if(province!=null) { province.style.display='none'; } province=document.getElementById(obj.name); if(province.style.display='none') { province.style.display='block'; }else { province.style.display='none'; }}function GetCity(obj) { city=obj.name; $("#drop").val(""); $("#drop").val(city); d.style.display='none';}$(function(){ $("#d .province p a").on("click",function(){ $("#d .province p a").css({"background-color":"#FFFFFF","color":"#000000"}); $(this).css({"background-color":"#FF9933","color":"#FFFFFF"}); }); $("#d .city p a").on("click",function(){ $("#d .city p a").css({"background-color":"#FFFFFF","color":"#000000"}); $(this).css({"background-color":"#FF9933","color":"#FFFFFF"}); });});</script><form><input id="drop" type="text" value="请选择城市" onfocus=this.blur() style="width:198px;height:22px;font-size:18px;color:#999999;position:relative;z-index:1;background:url(image/4.png) no-repeat;"onclick="xs();"/><div id="d" style="display:none;"> <div class="province" style="width:100px;height:268px; overflow-y:scroll;float:left;"> <p><a href="javascript:;" onclick="GetProvince(this)" name="安徽" >安徽 </a></p> </div> <div class="city" style="width:100px;height:268px;float:left;overflow-y:auto;"> <div id="安徽" style="display:none;"> <p><a href="javascript:;" onclick="GetCity(this)" name="合肥" >合肥 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="芜湖" >芜湖 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="蚌埠" >蚌埠 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="淮南" >淮南 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="马鞍山" >马鞍山 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="淮北" >淮北 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="铜陵" >铜陵 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="安庆" >安庆 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="黄山" >黄山 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="滁州" >滁州 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="阜阳" >阜阳 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="宿州" >宿州 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="巢湖" >巢湖 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="六安" >六安 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="亳州" >亳州 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="池州" >池州 </a></p> <p><a href="javascript:;" onclick="GetCity(this)" name="宣城" >宣城 </a></p> </div> </div></div></form>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
