- 首页
- 其他开发
- Jquery Accordion - 使用锚点从外部和内部链接打开特定面板
Jquery Accordion - 使用锚点从外部和内部链接打开特定面板
[英] Jquery Accordion - use anchors to open specific panels from external and internal links
本文介绍了Jquery Accordion - 使用锚点从外部和内部链接打开特定面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 jquery 手风琴 (Jquery 1.9/Jquery-ui-1.10.1).我想从带有锚标记的外部页面链接到该页面.当使用锚标签时，我想在手风琴上打开一个特定的面板.例如，如果我传递 #panel2 锚标记，我想打开并显示第二个面板.
我在手风琴页面上也有图片，这些图片也需要链接到手风琴中的特定面板.
有人可以帮忙吗?
解决方案
尝试:
HTML:
<a class="opener" data-panel="0" href="#">打开第 1 节</a><a class="opener" data-panel="1" href="#">打开第 2 节</a><a class="opener" data-panel="2" href="#">打开第 3 节</a><a class="opener" data-panel="3" href="#">打开第 4 节</a><div id="手风琴"><h3>第1部分</h3><div><p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.整数ut neque.Vivamus nisi metus，molestie vel，gravida in，调味品坐阿梅特，农科.南尼布.Donec 怀疑 eros.南美.Proin viverra leout odio.Curabiturmalesuada.前庭是 velit eu ante scelerisque vulputate. </p>
<h3>第2部分</h3><div><p>Sed non urna.Donec et ante.菜豆.前庭坐位纯粹.Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitorvelit, faucibus interdum Tellus libero ac justo.Vivamus 非 quam.在犹豫</p>
<h3>第3部分</h3><div><p>Nam enim risus，molestie et，porta ac，aliquam ac，risus.古怪的洛波蒂斯.Phasellus pellentesque purus in massa.Aenean 在 pede.菜豆actellus pellentesque semper.Sed ac 猫.Sed commodo, magna quis laciniaornare、quam ante aliquam nisi、eu iaculis leo purus venenatis dui.</p><ul><li>列出第一项</li><li>列出项目二</li><li>列表项三</li>
<h3>第4部分</h3><div><p>Cras 格言.Pellentesque 居民 morbi tristique senectus et netus etmalesuada 名声 ac turpis egestas.faucibus 前庭前 ipsum primisorci luctus et ultrices posuere cubilia Curae;Aenean lacinia mauris vel估计
<p>欧盟悬念.Nullam ut 自由人.整数 dignissim consequat lectus.类 aptent taciti socialsqu ad litora Tornt per conubia nostra, per</p> jQuery:
var $accordion = $("#accordion");$accordion.accordion();$(".opener").on("点击", function () {var $this = $(this),toOpen = $this.data("面板");$accordion.accordion("option", "active", toOpen);返回假；});
小提琴这里
I am using a jquery accordion (Jquery 1.9/Jquery-ui-1.10.1). I would like to link to the page from external pages with an anchor tag. When an anchor tag is used I would want to open a specific panel on the accordion. For example, if I pass a #panel2 anchor tag, I would want to open and display the second panel.
I also have images on the accordion page that also need to link to specifc panels in the accordion.
Can anyone help with this?
解决方案
Try:
HTML:
<a class="opener" data-panel="0" href="#">Open Section 1</a>
<a class="opener" data-panel="1" href="#">Open Section 2</a>
<a class="opener" data-panel="2" href="#">Open Section 3</a>
<a class="opener" data-panel="3" href="#">Open Section 4</a>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
faucibus urna.</p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia
ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
est.</p>
<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.</p>
</div>
</div>
jQuery:
var $accordion = $("#accordion");
$accordion.accordion();
$(".opener").on("click", function () {
var $this = $(this),
toOpen = $this.data("panel");
$accordion.accordion("option", "active", toOpen);
return false;
});
Fiddle here
这篇关于Jquery Accordion - 使用锚点从外部和内部链接打开特定面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
