jquery从链接打开手风琴
我做错了什么。 手风琴可以工作,但当我尝试从外部链接(fx.mysite.com/mypage.php#2)打开它时,它无法打开手风琴 我的标题是:jquery从链接打开手风琴,jquery,accordion,Jquery,Accordion,我做错了什么。 手风琴可以工作,但当我尝试从外部链接(fx.mysite.com/mypage.php#2)打开它时,它无法打开手风琴 我的标题是: <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: '.menuitem'
});
$(".menuitem").click(function(event){
window.location.hash=this.hash;
});
});
</script>
$(文档).ready(函数(){
$(“手风琴”)。手风琴({
活动:错误,
可折叠的:是的,
自动高度:false,
导航:对,
标题:'.menuitem'
});
$(“.menuitem”)。单击(函数(事件){
window.location.hash=this.hash;
});
});
我的html是:
<div id="accordion">
<a class="menuitem" href="#1">Header 1</a>
<!-- accordion panel --><div>
CONTENT 1</>
<!-- end accordion panel --></div>
<a class="menuitem" href="#2">Header 2</a>
<!-- accordion panel --><div>
CONTENT 2</>
<!-- end accordion panel --></div>
<!-- end accordion -->
内容1
内容2
您的accordeon是页面中的动态元素(由一些javascript代码驱动)
在url中设置html锚定(如#2)不会触发accordeon代码,您只是指示浏览器导航到锚定元素
您需要向页面添加一些javascript代码,以获取锚定值并将此参数传递给您的accordeon小部件。您可以这样做,但这不是一个完美的解决方案:
if ($.url().hash.length) {
var item = $.url().hash;
$('#accordion').accordion({active: item - 1}); // since you started numbering at 1 and not 0.
}
$(document).ready(function() {
var $hash = window.location.hash;
var $acc = $hash ? $hash : 1;
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: '.menuitem',
activate: $acc
});
});
可能需要进行许多更改。以下是工作代码-
无标题文件
$(文档).ready(函数(){
$(“手风琴”)。手风琴({
活动:错误,
可折叠的:是的,
自动高度:false,
导航:对,
标题:“a.menuitem”
});
$(“.menuitem”)。单击(函数(事件){
window.location.hash=this.hash;
});
//获取哈希值
var locationHash=window.location.hash;
//分摊价值
var hashSplit=locationHash.split(“#”);
//获取标签号
var currentTab=hashSplit[1];
setTimeout(函数(){
//打开当前哈希的选项卡
$(“#accordion”).accordion({active:parseInt(currentTab)-1});
}, 1000);
});
内容1
内容2
@Ashis
您的代码只能完美地工作,每个DIV都有相同的大小,因此,当我有一个有两行的DIV时,下面有很多空白。当它包含大量信息时,DIV被很好地填充。外部链接意味着什么?同时我找到了解决方案。Puting:--heightStyle:content,---在JS代码中,这解决了问题。你知道如何让choosen锚滚动到顶部吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: 'a.menuitem'
});
$(".menuitem").click(function(event){
window.location.hash=this.hash;
});
//get the hash value
var locationHash = window.location.hash;
//split the value
var hashSplit = locationHash.split('#');
//get the tab number
var currentTab = hashSplit[1];
window.setTimeout(function(){
//open the tab for the current hash
$("#accordion").accordion({ active: parseInt(currentTab)-1 });
}, 1000);
});
</script>
</head>
<body>
<div id="accordion">
<a class="menuitem" href="#1">Header 1</a>
<!-- accordion panel -->
<div>
CONTENT 1
</div>
<a class="menuitem" href="#2">Header 2</a>
<div>
CONTENT 2
</div>
<!-- end accordion -->
</div>
</body>
</html>