Home >Web Front-end >HTML Tutorial >用div做的下拉框怎么实现按字母跳转到指定的div?_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:25:521334browse

如图,字母这边是一个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>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn