加载（）后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) {