2

liタブでaddClass（'current'）を使用しようとしています。問題は、クリック関数がload（）を呼び出して、liタブの現在のクラスをリセットすることです。訪問者がクリックしたliのload（）の後にClass（）を追加するにはどうすればよいですか？

私が今どのように見えるか：

$('div#container ul.tab-nav li').click(function(event) {
   $('div#container').load('index.htm').fadeIn("slow");
   $('div ul.tab-nav li').removeClass('current');
   $(this).addClass('current');
   event.preventDefault();
   return false;
}); 

<ul class="tab-nav">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
</ul>
4

3 に答える 3

5

.load()現在、呼び出しが実行された後、AJAX呼び出しが終了する前のコード。.load()リクエストの完了後にコードを実行するには、の成功コールバックを使用する必要があります。

$('#container ul.tab-nav li').click(function(event) {
    $('#container').load('index.htm', function() {
        $('div ul.tab-nav li').removeClass('current');
        $(this).addClass('current').fadeIn("slow");
    });
    event.preventDefault();
    return false;
});

#containerのコンテンツを上書きしているため、新しいコンテンツが読み込まれると、クリックイベントハンドラーが失われることに注意してください。これが希望どおりでない場合は、最初の行を次のように置き換えてデリゲートを使用します。

$('#container').on('click', 'ul.tab-nav li', function(event) {
于 2012-04-25T09:54:22.630 に答える
3

クラス 'current' を変更した後、負荷をかけます。

$('div#container ul.tab-nav li').click(function(event) {
  $('div ul.tab-nav li').removeClass('current');
  $(this).addClass('current');
  $('div#container').load('index.htm').fadeIn("slow");
  event.preventDefault();
  return false;
});
于 2012-04-25T10:01:13.513 に答える
1

JQuery を使用すると、ページが読み込まれたときにコードを実行できます。

$(document).ready(function(){
    // your code here
});
于 2012-12-07T15:26:38.560 に答える