2009-08-29 87 views
1

下面是我正在处理的jQuery AJAX选项卡脚本的完整代码。我可以在jquery中为我加载一个URL吗?

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

如果网址是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> 
+0

你确切地知道什么部分? – strager 2009-08-29 00:58:26

回答

3

我会在网页加载时立即加载的div的内容新,假设它们的内容是不是真实的沉重。至于自动选择第一个标签,这应该通过CSS完成,因此在页面加载时立即可见。如果你想以编程方式做到这一点,我建议作为简单的东西:

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

这将提高该选项卡单击事件,并因此表现出它的内容。

要检测在页面加载时应选择哪个选项卡,应使用url的hash属性。

alert(window.location.hash); 

如果您要访问www.somesite.com/index.html#projects,将提醒“项目”。关于使用散列引用的好处在于,当CSS不可用时,通过将密钥内容滚动到视图中来自然地表现行为。

根据该值(如果存在),确定在页面加载时触发点击的标签。这应该足以让你朝着正确的方向滚动。如果您有更具体的问题,请随时询问他们,我们很乐意尽可能地为您提供帮助。

+0

谢谢我不知道触发功能,这是一个很好的事情知道。另外哈希的东西#name看起来正是我所需要的,我不知道如何使用它。我会想像if/else。如果(window.location.hash ===选项卡2)然后loadTab(id)......类似的东西,我不知道如何在JavaScript中做到这一点,但。你会说这是正确的方法吗? – JasonDavis 2009-08-29 01:18:18

+0

使用标签的ID值作为散列值。然后$(“#”+ window.location.hash).trigger(“click”);或类似的规定。 – Sampson 2009-08-29 01:39:18

+0

我建议使用除“tab1,tab2”和“tab3”以外的更多描述性名称。等等。 – Sampson 2009-08-29 01:39:58

相关问题