Question

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

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

如果网址为www.site.com/page.php，则应加载第一个标签的内容并选中该标签。

然后，如果我去了www.site.com/page.php?t=bulletins或任何方法，但在某种程度上，我可以指定在页面加载时加载和选择不同的标签。

在同一页面上的示例我可以在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");

这会引发该标签的点击事件，从而显示其内容。

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

alert(window.location.hash);

如果您要访问www.somesite.com/index.html#projects，那将提醒“项目”。使用哈希引用的好处在于它是如何自然地表现的，通过在CSS不可用时将键内容滚动到视图中。

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

我可以在jquery中为我加载一个标签吗？

1 个答案: