Question

I want to display divs when clicking on Link to the ID.

jQuery:

  $('#tab-bar a').on('click', function(e){

    e.preventDefault();
    var nextPage = $(e.target.hash);
    page(nextPage);
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
    });

HTML:

    <div id="pages">
     <div id="mainpage" class="current">
      <ul id="tab-bar">
    <li>
    <a href="#mimik"><img src="img/mimik.jpg"  alt="mimik"></img></a><br>
    </li>
      </ul>
     </div>

  <div id="mimik">
   <h2 style="color:red">Mimik</h2>
  </div>

When i use text instead of the image in the it works as i wish. The h2 is displayed.
With the image in as “link” it displays a blank page.
How can i solve this problem?

best regards
Simon

Answer 1

That is because when you have image inside anchor the event target is an img element when you click on it and it doesn’t have any hash property. Try this where I am using closest method to find the closest a element from the target element.

$('#tab-bar a').on('click', function(e){
    e.preventDefault();
    var nextPage = $($(e.target).closest('a')[0].hash);
    page(nextPage);
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
});

Alternatively you can use this.hash where this will point to the element on which event is attached.

$('#tab-bar a').on('click', function(e){
    e.preventDefault();
    var nextPage = $(this.hash);
    page(nextPage);
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
});