Question

我试图在li标签上使用addClass（＆＃39; current＆＃39;）。问题是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
});

load（）之后的li选项卡上的jQuery addClass（）

3 个答案: