用div做的下拉框怎么实现按字母跳转到指定的div？_html/css_WEB-ITnose

如图，字母这边是一个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标签的索引，
不知道我这么说你懂了没

大概意思懂了，能说说href里的索引怎么写不？

和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>