Question

我想在点击链接到ID时显示div。

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>

当我使用文本而不是图像时，它按照我的意愿工作。显示h2。将图像作为“链接”显示空白页面。我该如何解决这个问题？

最好的问候西蒙

Answer 1

这是因为当您在锚点内部拥有图像时，当您单击它并且它没有任何img属性时，事件目标是hash元素。尝试使用closest方法从目标元素中找到最接近的a元素。

$('#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");
});

或者，您可以使用this.hash this指向附加事件的元素。

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

jQuery onclick不能使用href和img

1 个答案: