load()之后的li选项卡上的jQuery addClass()

Question

我正试图在li选项卡上使用addClass('current').问题是click函数调用load(),它会重置li选项卡上的当前类.如何在访问者点击的li上的load()之后添加addClass()？

我现在的表现如何:

$('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>

Answer 1

目前,.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因此一旦加载新内容,Click事件处理程序将丢失.如果这不是您想要的,请使用以下代码替换第一行代理:

$('#container').on('click', 'ul.tab-nav li', function(event) {