-1

これに対する解決策を参照して、以下を更新してください。

これは私のクレイジーです!!

    productTabAnchors.on('click', function (e) {
      var index = productTabLis.index($(this).parent());

      e.preventDefault();

      // switch all tabs off  
      productTabLis.removeClass('active');
      productTabAnchors.removeClass('active');
      productTabContent.removeClass('active').hide();

      // switch this tab on  
      $(this).addClass("active");
      productTabLis.eq(index).addClass('tab active');
      productTabContent.eq(index).addClass('active').show();
    });

e.preventDefault()ページがアンカーにジャンプするため、機能していないようです。アンカーは にネストされているliので、私も試してみましe.stopPropagationたreturn false。

なぜこれがうまくいかないのでしょうか？

問題を示すフィドルへのリンクは次のとおりです。http://jsfiddle.net/mayoung/4zs97/

4

3 に答える 3

2

ページの他の場所に解析エラーはありますか?

他のエラーはありません。動的に追加されていますが、.on は動的に作成された要素のイベント バインディングを処理することになっています。右？

.on動的要素の処理に間違った構文を使用しています。

必要なのは

//v- Replace document with closest existing container on DOM ready
$(document).on('click', [selector], function() {
//                      ^-- replace with the dynamic element selector.

productTabAnchors はアンカーのコレクションです $('.product-tabs li a');

だからあなたの場合、そうあるべきです、

$(document).on('click', '.product-tabs li a', function () {

または、ページの読み込み時に .product-tabs が存在する場合、

$('.product-tabs').on('click', 'li a', function () {
于 2012-10-12T16:22:38.303 に答える
1

ここで動作します：

http://jsfiddle.net/B6Cmg/

jQuery のどのバージョンを使用していますか? お使いのバージョンの jQuery がon()をサポートしていることを確認してください

于 2012-10-12T16:22:32.277 に答える
0

ご提案いただきありがとうございます。要素の表示と非表示に関係している可能性があります。e.preventDefault は機能していましたが、これらの要素をクリックすると、ページがまだ飛び回っていました。非表示の要素の高さが異なるため、それらの要素が表示されたときにウィンドウがどのように応答するかわからなかったと思います。

デフォルトの display:none の代わりに、.hide() を使用してページの読み込み時に div を非表示にしてから、.show() を呼び出します。問題が解決しました。

ソリューションを示すフィドルへのリンクは次のとおりです。 http://jsfiddle.net/mayoung/4zs97/

于 2012-10-12T19:31:34.107 に答える