Question

这是小提琴：

JS没有错误。据我所知，它应该从点击的内容中删除“红点”类，并将其替换为“绿点”类？

if (previousTarget) {
    previousTarget.className = "";
}

event.target.className = "green-point";

Answer 1

我对Javascript不是很熟悉，但是使用jQuery我可以轻松解决你的问题（我假设你没问题，因为你的问题上有jQuery标签;-)）。我还对CSS做了一些小改动，因此地图上的引脚实际上是正确的大小。此外，我在引脚上添加了cursor: pointer，因此很明显您可以单击它们。请参阅下面的完整工作示例，或者在小提琴上：https://jsfiddle.net/0a0yo575/3/

$(document).ready(function() {

  $('.abs').click(function() {
    $('.abs').removeClass('green-point').addClass('red-point');
    $(this).removeClass('red-point').addClass('green-point');
    $('.link').css('font-weight', '');
    $('.link[data-marker="' + $(this).attr("id") + '"]').css('font-weight', 800);
  });

  $('.link').click(function() {
    $('.abs').removeClass('green-point').addClass('red-point');
    $('#' + $(this).data('marker')).removeClass('red-point').addClass('green-point');
    $('.link').css('font-weight', '');
    $(this).css('font-weight', 800);
  });

});

    a {
      cursor: pointer;
    }
    .abs {
      position: absolute;
      width: 20px;
      height: 32px;
      background-position: center center;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    #termini {
      top: 37.5%;
      left: 61.8%;
    }
    #french {
      top: 45.5%;
      left: 55.1%;
    }
    #mark {
      top: 58%;
      left: 39.3%;
    }
    #hakkasan {
      top: 65%;
      left: 12.6%;
    }
    #american {
      top: 62%;
      left: 42.8%;
    }
    #experiment {
      top: 54%;
      left: 57.2%;
    }
    #milk {
      top: 37.3%;
      left: 39.5%;
    }
    #pig {
      top: 37.1%;
      left: 38.5%;
    }
    #opium {
      top: 55%;
      left: 55.7%;
    }
    div {
      position: relative;
    }
    div.img-responsive {
      width: 100%;
      height: 65.5%;
    }
    .red-point {
      background-image: url("http://s23.postimg.org/842300vmv/point.png");
      background-position: center center;
      background-repeat: no-repeat;
    }
    .green-point {
      background-image: url("http://s21.postimg.org/9u6n8t38z/green.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 30px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class="img-responsive" src="http://s11.postimg.org/cbggzlpib/map.png">

  <div class="abs red-point" id="termini">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="french">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="mark">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="hakkasan">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="american">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="experiment">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="milk">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="ab red-point" id="pig">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="opium">
    <a onClick="turnGreen(event)"></a>
  </div>
</div>

<ol>
  <li class="link" data-marker="termini">
    <a>Bar Termini</a>
  </li>
  <li class="link" data-marker="french">
    <a>French House</a>
  </li>
  <li class="link" data-marker="mark">
    <a>Mark's Bar</a>
  </li>
  <li class="link" data-marker="hakkasan">
    <a>Hakkasan (bar)</a>
  </li>
  <li class="link" data-marker="american">
    <a>Bar Americain at Brasserie Zedel</a>
  </li>
  <li class="link" data-marker="experiment">
    <a>Experimental Cocktail Club</a>
  </li>
  <li class="link" data-marker="milk">
    <a>Milk &amp; Honey</a>
  </li>
  <li class="link" data-marker="pig">
    <a>Blind Pig</a>
  </li>
  <li class="link" data-marker="opium">
    <a>Opium</a>
  </li>
</ol>

Answer 2

您的问题是a内的red-point标签没有宽度，没有高度，因此您无法点击它。给他们

width: 100%;
height: 100%;
display: block;

你可以。

更改静态地图上活动项目的图钉颜色

2 个答案: