jquery - 加载（）后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因此一旦加载了新内容，点击事件处理程序将丢失。如果这不是您想要的，请通过将第一行替换为以下内容来使用委托：

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

Answer 2

更改类“当前”后加载。

$('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;
});

Answer 3

使用 JQuery，您可以在页面加载时执行代码：

$(document).ready(function(){
    // your code here
});