我可以让一个 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，这将提醒“项目”。使用哈希引用的好处在于它的行为方式很自然，当 CSS 不可用时，通过滚动键内容进入视图。

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