Question

我有一个简单的测试页面我用来测试用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;
});

有没有办法在更改课程之前智能地确定部分是否已满载？

Answer 1

我想你要移动你的

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

在success ajax回调中。但是，$（this）将是success内的不同上下文，因此您必须在$(this)调用之前将ajax上下文存储到变量中，并引用存储的上下文变量来自success。

Answer 2

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

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

Answer 3

也许我错过了你的问题，但我相信你只需要在你的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');
        }
    });
});

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

3 个答案: