jQuery onclick不能使用href和img

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.hashthis将指向在其上附加事件的元素。

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