0

わかりました、私は以前にたくさんの質問があったことを知っています.

私の問題divは、各タブ リンクをクリックすると、たとえば scrollTop リンクのようなもので期待されるように、ブラウザー ウィンドウ全体がタブ コンテンツのアンカーに移動することです。誰もが簡単な修正を知っていますか?

次のような基本的なタブ構造を使用しています。

<div id="tabContaier">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
  </ul>
</div>

<div class="tabDetails">

  <div id="tab1">
    <h1>My Tab Title</h1>
    <p>Whatever goes here</p>
  </div>

</div>

私のJqueryは次のとおりです。

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContaier ul li a").click(function(){

  var activeTab = $(this).attr("href");
  $("#tabContaier ul li a").removeClass("active");
  $(this).addClass("active");
  $(".tabContents").hide();
  $(activeTab).fadeIn();
});

いつものように、どんな助けも大歓迎です:-)

4

3 に答える 3

2

href 属性としてハッシュを持つアンカーをクリックすると、ページの上部にジャンプすることを意味していると思いますか?

これを停止したい場合は、クリック ハンドラーのデフォルト アクションを防止する必要があります。以下に例を示します。

$("#example").click(function(e) {

    e.preventDefault(); 

  //Add your code here
});
于 2012-05-15T11:01:46.190 に答える
1

問題は、ブラウザがhrefタブをフォローしていることです...次のことを行ってそれを防ぐ必要があります:

$("#tabContaier ul li a").click(function(event){
   // your code
   event.preventDefault();
});

event.preventDefault() のドキュメントはこちら

于 2012-05-15T11:13:16.413 に答える