我正在尝试从外部链接打开一个手风琴div。我看到了“导航: true”选项,但我不确定如何实现它。你给每个div一个id并像这样调用链接吗?http://domain.com/link#anchorid
我是新来jQuery的,请耐心听我说。这是我使用的代码,如果它有用的话。
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
});
</script>
<div id="accordion">
<div>
<h2><a href="#">Services</a></h2>
<div class="services">
<p>More information about all of these services</p>
</div>
</div>发布于 2009-02-25 23:27:26
导航选项不适用于面板激活。它用于告诉用户他们在哪里。
使用简化的html代码:
<div id="accordion">
<div>
<h2><a href="#services">Services</a></h2>
<p>More information about all of these services</p>
</div>
<div>
<h2><a href="#about">About</a></h2>
<p>About us</p>
</div>
</div>您可以将唯一ID放在标题的超链接中
然后是jQuery (简化):
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", navigation: true });
});
</script>“导航:真”将使您能够访问www.site.com/#about,这将使"about“面板处于选中状态。对于激活,有几种方法。也许一种方法是获取一个查询字符串并将其放入jQuery中。
使用C#
$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');使用PHP
$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');这将允许您指定通过www.site.com?id=2打开哪个面板
发布于 2014-07-10 22:17:55
许多答案提到的navigation选项是 in jQuery UI 1.9和在1.10中删除了。给出的理由是:
默认情况下,此功能处于禁用状态,并且只是您想要确定在初始化时激活哪个面板的多种方法之一。因此,我们不赞成这样做,只支持在accordion之外处理逻辑,并适当地设置active选项。
因此,使用较新版本的jQuery UI的程序员将需要编写自己的代码来处理此功能。
对于我的站点,我在</body>标记之前使用了一条JavaScript switch语句来实现这一点。(我不是一个有经验的程序员,所以其他人应该可以改进这个答案。)
<script>
function switchToPanel(panel){
var index = -1;
switch (panel) {
case "preschool":
index = 0;
break;
case "kindergarten":
index = 1;
break;
case "1st":
index = 2;
break;
default:
console.warn("Cannot switch to panel " + panel);
}
jQuery('#mathAccordion').accordion({active: index});
}
jQuery().ready(function() {
if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
var target = window.location.hash.replace('#', ''); //remove the #
switchToPanel(target);
}
});
</script>下面是相应的HTML:
<div class="accordion" id="mathAccordion">
<h1>Preschool</h1>
<div class="accordionFold">Preschool content</div>
<h1>Kindergarten</h1>
<div class="accordionFold">Kindergarten content</div>
<h1>1st Grade</h1>
<div class="accordionFold">First grade content</div>
</div>发布于 2010-03-24 22:49:18
哈,破解了。
使用php get方法。然而,上面的代码中有一个错误。$("#accordion").accordion("activate",'');
php代码需要删除引号。
现在很管用了。
干杯
伊恩
https://stackoverflow.com/questions/588030
复制相似问题