我正在使用jQuery标签,我遇到了一些问题。让我在这里为您详细说明,然后我会将代码放在下面:
问题1:
我总共有6个标签(本地div中的默认选项卡,其他5个通过Ajax加载)。页面加载时,我需要默认选择第3个选项卡。简单。问题是,我说我链接到http://example.com/index.html#services仍然显示第三个标签而不是服务标签。
我尝试使用cookie来设置所选的值,但它只是无法正常工作。
问题2:
这是主要的,我似乎无法弄明白。第三个选项卡是默认数据,如果我单击该选项卡右侧的选项卡并返回,则一切都是黄金。但是......如果我单击第3个选项卡左侧的选项卡(默认情况下左侧或右侧的所有选项卡都通过Ajax加载),然后单击返回第3个选项卡,面板完全消失,它是空白的。然后,单击其他选项卡不仅会使第3个选项卡处于选定状态(不仅仅是选项卡本身的内容),而且选定的选项卡也会显示在选定状态。
我拉着我的头发试图弄清楚这里发生了什么。我今天会在路上,但会尽可能检查。希望你们中的一个可以帮助我理顺这一点。
好的......这是我的jquery的代码
$(document).ready(function() {
//build tabs
$("#tabs").tabs( {
cookie: { expires : 30 },
load: function(ui) {
//initilize accordion
$("#accordion").accordion( { active: 2 } );
},
show: function(event, ui) {
//initialize accordion
$("#accordion").accordion( { active : 2 } );
//cookie select
var cookie = $("#tabs").tabs("option", "cookie");
/*
if(cookie) {
$("#tabs").tabs("select", $.cookie('ui-tabs-1'));
} else {
$("#tabs").tabs("select", 2);
}
*/
},
ajaxOptions: {
dataFilter: function(data, dataType) {
return $(data).find("#content_area");
}
}
} );
});
以下是我的标签中的代码:
<div id="tabs">
<ul>
<li><a href="home.html" title="home">Home</a></li>
<li><a href="services.html" title="services">Services</a></li>
<li><a href="#content_area">Company</a></li>
<li><a href="employee.html" title="employee">Employee</a></li>
<li><a href="work-tools.html" title="work_tools">Work Tools</a></li>
<li><a href="contact.html" title="contact">Contact</a></li>
</ul>
<div id="content_area">
<p>CONTENT HERE</p>
</div>
<!-- end #content_area -->
我真诚地感谢你的帮助。
答案 0 :(得分:0)
好的......想出来了!走向一个全新的方向,实际上结果更好,因为我可以使用标签和后退按钮更改自定义地址栏。
我强烈推荐jQuery Address plugin,因为我用它来解决我的问题。我不得不在选项卡中对手风琴进行一些调整,因为autoHeight不起作用,但通过检查手风琴div的height()和设置changestart来修复它。