如何从外部链接打开JQuery Accordian UI选项卡

How can I open a JQuery Accordian UI tab from an external link?

本文关键字:Accordian UI 选项 JQuery 从外部 链接      更新时间:2023-09-26

HTML

<div id="accordion">

<h3>FIRST SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>
<h3>SECOND SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>
<h3>THIRD SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>
</div>

JS

jQuery(document).ready(function($) {
var $accordion = $("#accordion");
$accordion.accordion();
$(".opener").on("click", function () {
var $this = $(this),
    toOpen = $this.data("panel");
    $accordion.accordion("option", "active", toOpen);
    return false;
});

这是链接:

<a class="opener" data-panel="2" href="/new-page">THIRD SECTION</a>

这是一个解决方案:http://jsfiddle.net/VZ3T5/1/然而,当链接来自单独的页面时,它显然不起作用,因为函数返回false。

有人知道重定向到新页面,然后完成相同功能的方法吗?我一直在到处寻找这个问题的答案,但到目前为止还没有任何结果。感谢

您可以做的是在URL中有一个散列或查询参数,然后您可以调用

var setPanelToHashIndex = function() {
  // Alternatively for query you can use jQuery.params('panelIndex') or similar
  var hashIndex = +window.location.hash.replace('#', '')
  jQuery('#accordion').accordion('option', 'active', hashIndex)
}

那么在页面加载时只需使用document.ready

jQuery(setPanelToHashIndex)