有没有更好的方法来做 jquery 标签？

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

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

您还可以在 document.ready() 的末尾添加对要调用的选项卡的新单击功能的调用：

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