9

次の HTML マークアップがあります。これは 3 つのタブであり、クリックするとページの div に事前に読み込まれたテキストが表示されます。

    <a class="page" id="tab1">This is tab!</a> 
    <a class="page" id="tab2">This is tab 2!</a> 
    <a class="page" id="tab3">This is tab3!</a>

この jQuery は、タブの 1 つがクリックされたときにテキストを非表示または表示するだけです。

$(document).ready(function() { 
   $(".page").hide(); 
   $("#tab1").show(); 
}); 
$(".page").click(function() { 
   var id = $(this).attr("href"); 
   $(".page").hide();
   $(id).show(); 
});

ただし、いずれかのタブをクリックしたときにページ オーバーフローが発生した場合 (つまり、ページがスクロール可能である場合)、ページは自動スクロールして div をビューポートの中央に配置します。これを防ぐにはどうすればよいですか？

4

3 に答える 3

13

クリック時のページ スクロールを防止するには(アンカー ハッシュに続いて)、以下を使用します: Event.preventDefault()

$(".page").click(function( evt ) {

   evt.preventDefault();       // prevents browser's default anchor behavior

   // Other code here....
   $(".page").hide();            // HIDE ALL     .page
   $("."+ this.id ).show();      // SHOW RELATED .(id)
});
于 2012-04-23T12:36:32.467 に答える
9 
 <a href="#" class="page" id="tab1" onclick="return false;">This is tab!</a>

return falseすべてのアンカーに追加します。

于 2012-04-23T12:35:12.043 に答える
0

これは、ハッシュ付きのリンクのデフォルトの動作です。あなたが望むのは、デフォルトのブラウザの動作を防ぐことなので、event.preventDefaultメソッドを使用する必要があります

$(".page").click(function( event ) { 
   var $el = $(this), id = $el.attr( "href" ); 
   $(".page").hide();
   $el.show(); 
   event.preventDefault();
});
于 2012-04-23T12:38:20.593 に答える