jQuery Accordion - 根据以前的链接设置活动面板

时间:2012-11-20 09:38:43

标签: php jquery-ui jquery

我正在试图弄清楚如何设置手风琴,以便根据用于打开页面的链接显示不同的活动面板。

如果您查看我正在处理的页面 - http://testing.xenongroupadmin.com/lms/admin/index.html - 您可以在顶部看到导航栏。如果您将鼠标悬停在选区上,则会出现一个下拉框。

第一个菜单项“课程资料”显示了三个选项 - “工作坊”,“远程学习”和“学习资源”。点击这些链接中的任意一个,打开目标页面,其中包含一个jQuery手风琴。手风琴上的标题与导航栏中的三个选项相关联。

所以,为了达到目的,我想要的是根据点击的链接打开相应的手风琴标签。因此,如果我单击导航菜单中的“远程学习”,“材料”页面将会打开远程学习手风琴选项卡。

如果单击“课程资料”链接而未从子菜单中选择选项,则应关闭所有手风琴选项卡。

有人可以帮忙吗?如果需要任何服务器端脚本,我的服务器将设置为与PHP一起使用。如果有必要,也很乐意使用Ajax。

谢谢!

3 个答案:

答案 0 :(得分:1)

您可以使用手风琴选项'active'

$('#accordion').accordion({
    active : 0
});  

-1表示关闭,0表示研讨会,1表示远程学习,2表示学习资源

答案 1 :(得分:1)

让您的子菜单链接到materials.html,并带有指示要打开的面板的哈希标记。与'materials.html#workshop-slides'一样,然后使用Javascript解析文档就绪的location.hash并打开相应的面板。

答案 2 :(得分:0)

在javascript中执行此操作的方法。将URL中的活动选项卡引用传递为#tab-0(其中数字将成为选项卡的索引)。这是一个粗略的实现,可以帮助您入门:

$(document).ready(function() {
    var a =0;
    if(location.href.indexOf("#tab-1")) a = 1;
    if(location.href.indexOf("#tab-2")) a = 2;
    $('#accordion').accordion({collapsible : true, active : a});  
});  

如果你想从php那里做,那么你必须用要打开的正确选项卡索引替换'none'值。