这种2行的选项卡，div+css怎么写，用到JS吗？
上面红色的是选项，地图跟随变换的，有人会的话告诉一声，或者点醒一下，请教我发现我不太懂下面大神的回答_(:3」∠)_，最好有人能写一个给我看看...
上面红色的是选项，地图跟随变换的，有人会的话告诉一声，或者点醒一下，请教
我发现我不太懂下面大神的回答_(:3」∠)_，最好有人能写一个给我看看 展开
我发现我不太懂下面大神的回答_(:3」∠)_，最好有人能写一个给我看看 展开
6个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
font-size:12px;
}
.wrap{
width:270px;
}
.btn-city{
width:50px;
float:left;
background:#e61f18;
margin:5px;
text-align:center;
padding:3px;
color:#fff;
}
.btn-city:hover{
background:#ff2f18;
}
.selected{
color:#333;
background:#eee;
}
#map{
width:100%;
height:300px;
border:1px solid #ccc;
padding:10px;color:#666;font-size:20px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='btn-city'>佛山</div>
<div class='btn-city'>广州</div>
<div class='btn-city'>北京</div>
<div class='btn-city'>上海</div>
<div class='btn-city'>黑龙江</div>
<div class='btn-city'>杭州</div>
<div class='btn-city'>重庆</div>
<div class='btn-city'>成都</div>
<div id='map'></div>
</div>
</body>
<script>
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className.indexOf('btn-city')!=-1){
divs[i].onclick=chooseCity;
}
}
var selectedCity=null;
function chooseCity(){
if(selectedCity){
selectedCity.className='btn-city';
}
selectedCity=this;
selectedCity.className='btn-city selected';
document.getElementById('map').innerText='地图定位到：'+this.innerText;
}
</script>
</html>
按钮显示为几行可以通过样式来控制，如：.wrap{width:600px;}就在一行 200px就3行
花了点时间 望采纳 ：）
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
啊，这个很简单啊，几个div，然后onclick事件，然后调用谷歌地图api，然后定位显示；然后，就这样
追问
能稍微写几行吗，我div+css也是在学习中，粗略写一下就可以了，特别是哪个onclick和调用，我还不会调用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
会用到JS，我的思路是绝对定位地图上的红点，选项卡可以用div构建，不同的选项卡触发不同的红点；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
切换需要用到js，至于排几行，完全由css来控制。
追问
求写几行代码看看，我在学选项卡0.0，我发现课本内容都是单行的，我就画了这么一个图，想问问2行的怎么写
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
