0

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 が表示されます。画像を「リンク」として使用すると、空白のページが表示されます。どうすればこの問題を解決できますか?

よろしくサイモン

4

1 に答える 1

3

これは、アンカー内に画像がある場合、クリックしたときにイベントターゲットが要素であり、プロパティimgがないためです。メソッドを使用して、ターゲット要素から最も近い要素を見つけるhash場所でこれを試してください。closesta

$('#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.hashwhere willを使用できます。this

$('#tab-bar a').on('click', function(e){
    e.preventDefault();
    var nextPage = $(this.hash);
    page(nextPage);
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
});
于 2012-06-04T15:32:35.210 に答える