jQuery Accordion - 根据先前的链接设置加载活动面板答案

【问题标题】：jQuery Accordion - set active panel on load depending on previous linkjQuery Accordion - 根据先前的链接设置加载活动面板
【发布时间】：2012-11-20 09:38:42
【问题描述】：

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

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

第一个菜单项“课程资料”显示三个选项 - “研讨会”、“远程学习”和“学习资源”。单击这些链接中的任何一个，目标页面就会打开，其中包含一个 jQuery 手风琴。此手风琴上的标题与导航栏中的三个选项相关。

所以，直截了当，我想要的是根据单击的链接打开相应的手风琴选项卡。因此，如果我在导航菜单中单击“远程学习”，“材料”页面将加载并打开远程学习手风琴选项卡。

如果在未从子菜单中选择选项的情况下单击“课程资料”链接，则应关闭所有手风琴选项卡。

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

谢谢！

【问题讨论】：

标签： php jquery-ui jquery

【解决方案1】：

将您的子菜单链接到materials.html，并带有指示要打开的面板的井号标签。像 'materials.html#workshop-slides' 一样，然后使用 Javascript 解析 location.hash 上的文档并打开相应的面板。

【讨论】：

【解决方案2】：

你可以使用手风琴选项'active':

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

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

【讨论】：

【解决方案3】：

一种在 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”值替换为要打开的正确标签索引。

【讨论】：

仅供参考 location.hash 只为您提供哈希标签。
是的，但我曾经在旧版浏览器中遇到过一些问题。 ;(
我确实记得几年前（我认为这是一个 IE6 问题），在一个特定浏览器中的哈希值会在没有“#”的情况下返回。为了纠正我只是设置 var hash = location.hash.replace('#', '');并与之进行比较。