我可以让 URL 在 jquery 中为我加载选项卡吗？

Question

下面是我正在处理的 jquery AJAX 选项卡脚本的完整代码。

我需要一些帮助。该脚本有 3 个选项卡，每个选项卡使用 AJAX 将页面加载到 DIV 中。
我需要能够“选择”3 个页面中的 1 个并在页面加载时加载。

如果 URL 是 www.site.com/page.php，它应该加载第一个选项卡的内容并选择该选项卡。

然后，如果我访问 www.site.com/page.php?t=bulletins 或任何方法，但以某种方式在 URL 中，我可以指定在页面加载时加载和选择不同的选项卡。

在同一页面上的示例中，我可以在 URL 中添加一些内容，当从另一个页面上的链接调用该页面并转到此页面时，它将加载选项卡 2 而不是选项卡 1。

任何人都可以帮我将其添加到此脚本中吗？如果可能的话我不想使用jqueryUI。

那么，如果没有 jquery UI，这可能吗？

也将感谢对我当前代码的任何改进，我是 javascript 和 jquery 的新手

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
// array of pages to load
var pageUrl = new Array();          
pageUrl[1] = "page1.php";
pageUrl[2] = "somepage2.php";
pageUrl[3] = "lastpage3.php";

// function to load page into DIV
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.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

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

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

<div class="HOMEtabdiv">
    <ul class="HOMEtabs">
        <li><a id="tab1" href="#" onClick="return false;" class="selected">All</a></li>
        <li><a id="tab2" href="#" onClick="return false;">Status</a></li>
        <li><a id="tab3" href="#" onClick="return false;">Bulletins</a></li>
    </ul> 
</div>
<div id="loading"> 
    <img src="images/loading.gif">
</div> 
<div id="tabcontent"> 
Tab Content loads pages into here
</div>

<style type="text/css">
a:active { outline:none;}
:focus {  -moz-outline-style:none;}
/* root element for tabs  */
ul.HOMEtabs {  
    margin:0 !important; 
    padding:0;
    height:30px;
    border-bottom:1px solid #666;       
}
/* single tab */
ul.HOMEtabs li {  
    float:left;  
    padding:0; 
    margin:0;  
    list-style-type:none;   
}
ul.HOMEtabs a { 
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px;   
    text-decoration:none;
    border:1px solid #666;  
    border-bottom:0px;
    height:18px;
    background-color:#efefef;
    color:#777;
    margin-right:2px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright:4px;
    position:relative;
    top:1px;    
}
ul.HOMEtabs a:hover {
    background-color:#FFFFFF;
    color:#333;
}
/* selected tab */
ul.HOMEtabs a.selected {
    background-color:#FFFFFF;
    border-bottom:2px solid #FFFFFF;    
    color:#000; 
    cursor:default;
}
</style>

Answer 1

我会在页面加载后立即加载 div 的内容，假设它们的内容并不重。至于自动选择第一个选项卡，应该通过 CSS 完成，因此它在页面加载时立即可见。如果您希望以编程方式执行此操作，我建议使用简单的方法：

$("div.tabs:first").trigger("click");

这将引发该选项卡的单击事件，从而显示其内容。

要检测页面加载时应选择哪个选项卡，您应该使用 url 的哈希属性。

alert(window.location.hash);

如果您要访问 www.somesite.com/index.html#projects，则会向“projects”发出警报。使用哈希引用的好处在于它的自然行为方式，当 CSS 不可用时，将关键内容滚动到视图中。

根据该值（如果存在），确定在页面加载时触发哪个选项卡的点击。这应该足以让你朝着正确的方向前进。如果您有更具体的问题，请随时询问，我们将很乐意为您提供尽可能的帮助。