使用jquery在同一页面mvc3上显示部分视图

我有一个简单的测试页面，用来测试MVC3中的垂直选项卡界面和jquery显示部分视图……一切正常，但我有一个小问题

一切正常，但我想添加一条“加载”消息，并仅在部分完全加载后才将

类更改为“活动”…现在，它只是检索数据，

类在部分完全加载之前正在更改

这是我的js代码：

$('#left-nav li').live('click', function (event) {
    var navlink = $(this).children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
        }
    });
    $(this).addClass('active');
    //here you have to return false to prevent anchor from taking you to other page
    return false;
});

---

在更改类之前，是否有一种方法可以智能地确定分部是否已完全加载

只需将逻辑移到成功回调中：

$('#left-nav li').live('click', function (event) {
    event.preventDefault();
    var li = $(this);
    var navlink = li.children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            li.addClass('active');
        }
    });
});

我还建议切换到

.on（）

而不是

.live（）

。这需要jQuery 1.7+：

$('#left-nav').on('click', 'li', function (event) {
    e.preventDefault();
    var li = $(this);
    var navlink = li.children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            li.addClass('active');
        }
    });
});

---

我想你想搬家

$(this).addClass('active');

---

在

success

ajax回调的内部。但是，$（this）在

success

中是一个不同的上下文，因此在调用

ajax

之前，您必须将

$（this）

上下文存储到一个变量中，并从

success

的内部引用存储的上下文变量，也许我在您的问题中遗漏了什么，但我相信您只需要在ajax调用的成功回调中添加

active

类

$('#left-nav li').live('click', function (event) {
    event.preventDefault();
    var navlink = $(this).children("a").attr("href");
    $('#left-nav li').removeClass('active');
    var self = $(this);
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            self.addClass('active');
        }
    });
});

---

谢谢你们的快速反应…很有魅力。