下面是我正在处理的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>
你确切地知道什么部分? – strager 2009-08-29 00:58:26