我有 3 个按钮链接到它们下方的 iframe，当我单击它们时，它们会将 iframe 内容更改为谷歌地图。
当我在 iframe 中看到选定的 map 时，我希望按钮保持单击状态(选定)，我该如何实现？
#container {
width: 1100px;
margin: 25px auto;
min-height: 10%;
height: auto;
position: relative;
background: #fff;
}
.header_mapa {
padding-bottom: 5px;
}
.boton_ubicaciones {
padding: 1.7px;
opacity: .8;
}
.boton_ubicaciones:hover {
opacity: 1;
}
.mapa {
display: block;
position: relative;
margin: auto;
border: 0px solid red;
width: 1100px;
height: 882px;
}
.mapa_rdv {
display: block;
position: relative;
margin: auto;
border: 0px solid red;
width: 936px;
height: 497px;
}
.container_mapa {
width: 1100px;
margin: 0 auto;
height: 700px;
position: relative;
margin-bottom: 40px;
}
.iframe_propiedades {
width: 100%;
border: none;
height: 100%;
margin-bottom: 30px;
}<!DOCTYPE HTML>
<head>
<html lang="es-Es" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Erick MacGregor" content="Designed by Erick MacGregor" />
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style_mapa.css" />
<!-- jQuery library (served from Google) -->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDZaCv9TVPw6ufy-83gj3Xf83R_yu6uFqY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div class="header_mapa">
<a href="https://mapsengine.google.com/map/embed?mid=zrM52HiK-Kzo.k-Lhy_dg8m2o" target="iframe_propiedades">
<img class="boton_ubicaciones" id="boton_mty" src="http://serena.com.mx/img/ubicaciones/monterrey.png" width="360px" height="50px" />
</a>
<a href="https://mapsengine.google.com/map/embed?mid=zrM52HiK-Kzo.k8eKWoHf9haw" target="iframe_propiedades">
<img class="boton_ubicaciones" id="boton_ra" src="http://serena.com.mx/img/ubicaciones/ramosarizpe.png" width="360px" height="50px" />
</a>
<a href="https://mapsengine.google.com/map/embed?mid=zrM52HiK-Kzo.k8eKWoHf9haw" target="iframe_propiedades">
<img class="boton_ubicaciones" id="boton_ags" src="http://serena.com.mx/img/ubicaciones/aguascalientes.png" width="360px" height="50px" />
</a>
</div>
<div class="container_mapa">
<iframe name="iframe_propiedades" class="iframe_propiedades" src="https://mapsengine.google.com/map/embed?mid=zrM52HiK-Kzo.k-Lhy_dg8m2o"></iframe>
</div>
<div class="clear"></div>
</div>
</body>
</html>最佳答案
试试这个:
JS:
$(document).ready(function(){
$('.boton_ubicaciones').click(function(e){
$('.boton_ubicaciones').removeClass('active');
$(this).addClass('active');
});
});
CSS:
.active{
opacity:1;
}
关于javascript - 在站点中导航时如何保持单击按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30485971/