activity image

У меня есть тег изображения внутри тега привязки, тег изображения имеет серый значок звездочки, который при щелчке я хочу изменить его на значок звезды золотого цвета, поэтому внутри тега изображения я написал onclick="myFunction('activity');", который делает этот бит

<a href="/projects/test-project/activity" class="activity">
<img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" onclick="myFunction('activity');" id="activity">
Activity</a>

Но проблема в том, что когда я нажимаю на изображение значка звезды, функция onlick работает, но загружает URL из href="/projects/test-project/activity" из тега привязки. Как я нажимаю на этот тег изображения и чтобы страница не загружалась?

Спасибо за любую помощь

2
Supersonic 14 Дек 2015 в 11:13

3 ответа

Лучший ответ

Удалите функцию onclick из html и обновите код следующим образом:

HTML :

<a href="/projects/test-project/activity" class="activity">
    <img width="16" height="16" alt="grey star" src="/img/star.png" 
         style="position:relative;left:180px;top:3px;z-index:100"  id="activity">
    Activity
</a>

JQuery :

$(document).ready(function(){
    $('#activity').click(function(event){
        event.preventDefault();
        myFunction('activity');
    });
});
3
Sanjay Kumar N S 14 Дек 2015 в 08:25

После onclick сделайте event.stopPropagation() и return false();

<a href="/projects/test-project/activity" class="activity">
<img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" onclick="myFunction('activity');event.stopPropagation();return false();" id="activity">
Activity</a>
1
gurvinder372 14 Дек 2015 в 08:22

Вы можете использовать функцию jquery, как показано ниже

$(function(){
 		$('#activity').on('click', function(e){
   			e.preventDefault();
   			alert('I am in');
   		})
   	})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/projects/test-project/activity" class="activity">
    <img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" id="activity">
    Activity</a>
1
Butterfly 14 Дек 2015 в 08:21