Question

下面是我用于AJAX选项卡的jquery代码

有没有更好的方式在浏览器中更快，我不关心花哨的过渡。

<script type="text/javascript">
var pageUrl = new Array();          
pageUrl[1] = "HOMEbulletin.inc.php";
pageUrl[2] = "HOMEfriendstatus.inc.php";
pageUrl[3] = "HOMEbulletin.inc.php";

function loadTab(id){
    if (pageUrl[id].length > 0){
        $("#loading").show();
        $.ajax({url: pageUrl[id], cache: false, success: function(message) {                            
            $("#tabcontent").empty().append(message);
            $("#loading").hide();             
        }
    });                 
}
}

$(document).ready(function(){
    $("#loading").hide();
    $("#tab1").click(function(){
        loadTab(1);
        $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab2").click(function(){
        loadTab(2);
        $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab3").click(function(){
        loadTab(3);
        $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });
    });
</script>

Answer 1

你签出了JQueryUI's Tabs吗？他们非常优秀。无需重新发明轮子。它还增加了对一些简洁功能的支持，例如使用cookie来保存用户最后使用的任何标签。

如果您担心文件大小，则只能获取所需的组件，或者：

You can use Google's hosted copies of both JQuery and JQueryUI, it uses their entire network, and is extremely fast.

3 Reasons to let Google host for you - Encosia.com

Answer 2

虽然看起来你自己解决了，但我也会提供替代方案。

您还可以在文档末尾添加对要调用的选项卡的新点击功能的调用.ready（）：

$("#tab1").click();

有没有更好的方法来做jquery Tabs？

2 个答案: