Question

我有3个按钮链接到他们下方的iframe，当我点击它们时，他们将iframe内容更改为谷歌地图。 screenshot

当我在iframe中看到所选地图时，我希望按钮保持点击状态（已选中），我该如何实现？

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

Answer 1

试试这个：

JS：

$(document).ready(function(){
    $('.boton_ubicaciones').click(function(e){
        $('.boton_ubicaciones').removeClass('active');
        $(this).addClass('active');
    });
});

CSS：

.active{
    opacity:1;
}

如何在站点中导航时单击按钮

1 个答案: