Question

我正在开发一个小部件。窗口小部件有三个选项卡，以下列方式实现。

<div id="widget">
    <ul id="tabs">
        <li><a href="http...">One</a></li>
        <li><a href="http...">Two</a></li>
        <li><a href="http...">Three</a></li>
    </ul>

    <div id="tab_container">
        <div id="tab_content">
            //Tab Content goes here...
        </div>
    </div>
</div>

// The active class is initialized when the document loads 
$("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'));
    $(this).parent().addClass("active");

    return false;   
});

我遇到的问题是编写的jquery代码非常慢。如果用户快速更改标签，则小部件会出现问题并陷入困境。这会导致选项卡不与正在显示的数据对齐，只是一般滞后。我相信这是因为在$ .load（）完成之前更改了选项卡。我试图实现以下内容：

("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), function (){
        $(this).parent().addClass("active");
    });

    return false;   
});

据我所知，加载函数中的回调函数在加载函数完成之前不会执行。我认为这可以解决我的问题，但是我无法想出一种方法来选择在回调函数中单击的正确选项卡。如果这不是这样做的方法，那么实现这些选项卡的最佳方法是什么，以便他们停止加载旧请求并加载用户选择的最新选项卡？

由于

Answer 1

为什么不使用jQuery UI Tabs plug-in？

Answer 2

无论您是否应该使用jQuery UI选项卡，这都是您的代码可以工作的方式

$("#tabs li a").click(function(e)
{
    var fn = function(a) {
        return function() {
            $(a).parent().addClass("active");
        };
    }
    $("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), fn(this));

    return false;
});

优化选项卡的jQuery

2 个答案: