改變引腳顏色活動項目靜態地圖

Question

在這裏的小提琴：

https://jsfiddle.net/0a0yo575/1/

有與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

你的問題是，red-point內a標籤沒有寬度和高度沒有，所以你不能點擊它。給他們

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

你可以。