jQueryUI-尝试打开手风琴部分，其中手风琴位于单独的选项卡中
我是JQuery新手，在页面选项卡中jqueryui手风琴中有一个指向锚的链接时，我在尝试让函数工作时遇到了问题。我有两个单独的手风琴（2）在两个标签（1在@tab）。我已经拼凑了一些代码，有些能用，有些不能用。以下是我所拥有的：jQueryUI-尝试打开手风琴部分，其中手风琴位于单独的选项卡中,jquery,user-interface,tabs,accordion,Jquery,User Interface,Tabs,Accordion,我是JQuery新手，在页面选项卡中jqueryui手风琴中有一个指向锚的链接时，我在尝试让函数工作时遇到了问题。我有两个单独的手风琴（2）在两个标签（1在@tab）。我已经拼凑了一些代码，有些能用，有些不能用。以下是我所拥有的： <script type="text/javascript"> $(function(){ // Accordion $('#accordion2, #accordion3').accordion({ header: "h3",nav
<script type="text/javascript">
$(function(){
// Accordion
$('#accordion2, #accordion3').accordion({ header: "h3",navigation: true,collapsible: true });
// Tabs
$('#tabs').tabs();
// Tabs
var $tabs = $("#tabs").tabs();
// Handle clicks for on-page accordion section links
$("a.openTab").click(function(e) {
var thisName = "";
var $tabParent = null;
var tabIndex = 0;
var $accordionParent = null;
var accordionIndex = 0;
// Prevent default click behavior
e.preventDefault();
// Get the named anchor from the clicked link's href
thisName = $(this).attr("href").split("#")[1];
// Find the tab parent. Tabs should all have class "tab".
$tabParent = $("a[name='" + thisName + "']").closest(".tab");
// Find the accordion parent. Accordion should all have class "accTable".
$accordionParent = $("a[name='" + thisName + "']").closest(".accTable");
// Get the index of this tab
tabIndex = $(".tab").index($tabParent);
// Get the index of this accordion
accordionIndex = $(".accTable").index($accordionParent);
// alert(accordionIndex);
// Open the appropriate tab
$tabs.tabs("select", tabIndex);
// Open the appropriate accordion section
$('.accordionTabs').accordion( "option", "active", accordionIndex );
// Scroll down to selected opened accordion
$('html, body').animate({
scrollTop:$("a[name='" + thisName + "']").offset().top
}, 2000);
});
});
</script>
</head>
<body>
<DIV id=wrapper>
<BR><BR>
<a class="openTab" href="#tab1">Target anchor in tab 1</a><BR>
<a class="openTab" href="#tab2">Target anchor in tab 2</a><BR>
<a class="openTab" href="#tab3">Target anchor in tab 3</a><BR>
<a class="openTab" href="#ServicesSkill">Services anchor within tab 2</a><BR>
<a class="openTab" href="#SolutionsSkill">Solution anchor within tab 2</a><BR>
<a class="openTab" href="#EducationSkill">Education anchor within tab 3</a><BR>
<a class="openTab" href="#CustomerSkill">Customer anchor within tab 3</a><BR>
<BR><BR><BR>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1" class="tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a name="tab1">This is a named anchor in tab 1.</a>
</div>
<div id="tabs-2" class="tab">
<p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
<a name="tab2">This is a named anchor in tab 2.</a>
<div id="accordion2" class="accordionTabs">
<div>
<h3><a href="#">First</a></h3>
<div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Services</a></h3>
<div class="accTable">
<a name="ServicesSkill"></a>
Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Solutions</a></h3>
<div class="accTable">
<a name="SolutionsSkill"></a>
Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
<div id="tabs-3" class="tab">
<div id="accordion3" class="accordionTabs">
<div>
<h3><a href="#">Second</a></h3>
<div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Education</a></h3>
<div class="accTable">
<a name="EducationSkill"></a>
Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Customer</a></h3>
<div class="accTable">
<a name="CustomerSkill"></a>
Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
<P>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque
nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
ullamcorper augue.</P>
<a name="tab3">This is a named anchor in tab 3.</a>
</div>
</div>
$（函数（）{
//手风琴
$（'#accordio2，#accordio3'）.accordion（{标题：“h3”，导航：true，可折叠：true}）；
//标签
$（“#tabs”）.tabs（）；
//标签
var$tabs=$（“#tabs”）.tabs（）；
//处理页面上手风琴部分链接的单击
$（“a.openTab”）。单击（函数（e）{
var thisName=“”；
var$tabParent=null；
var指数=0；
var$accordionParent=null；
var accordionIndex=0；
//防止默认单击行为
e、 预防默认值（）；
//从单击的链接的href获取命名锚
thisName=$（this.attr（“href”）.split（“#”）[1]；
//查找选项卡父级。选项卡都应具有类“tab”。
$tabParent=$（$a[name='“+thisName+'”）。最近（“.tab”）；
//查找accordion父级。accordion应全部具有类“accTable”。
$accordionParent=$（$a[name='“+thisName+']”）。最近（“.accTable”）；
//获取此选项卡的索引
tabIndex=$（“.tab”）.index（$tabParent）；
//得到这个手风琴的索引
accordionIndex=$（“.accTable”）.index（$accordionParent）；
//警报（手风琴指数）；
//打开相应的选项卡
$tabs.tabs（“选择”，tabIndex）；
//打开相应的手风琴部分
$（'.accordionTabs'）.accordion（“选项”，“活动”，accordioindex）；
//向下滚动至所选打开的手风琴
$（'html，body'）。设置动画({
scrollTop:$（$a[name=”+thisName+“]]）.offset（）.top
}, 2000);
});
});
Lorem ipsum Door sit amet，为精英服务，为临时雇员提供服务
这是一个巨大的挑战。这是一个小小的节日
ullamco Laboraris nisi ut aliquip ex ea commodo consequat实习
Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。
南对岸，拍卖人a，贵人奎斯。
Nam dui erat、拍卖人a、贵宾奎斯、索利西图丁欧盟、菲利斯。佩伦茨克
尼西乌尔纳，中间叶，矢状叶，前庭，腔隙。莫里斯·波特托
乌拉姆科珀·奥古斯。
这是表3中的命名锚。
它将在我的第一个标签中的第一个手风琴中打开锚，但当试图打开指向我在第二个标签中的第二个手风琴中的任何锚的链接时，它会变得不稳定。我修改了我在别处找到的一个“openTab”函数，并添加了代码，试图让它打开带有锚的手风琴部分。我似乎不知道我有什么错，它会在第一个手风琴打开部分，好吧，但当试图在第二个手风琴在第二个选项卡中打开一个部分时出错。它似乎能够正确地找到手风琴部分的索引以及手风琴所在的选项卡索引。它要么不会打开分区，要么有时会选择它，并且不会打开分区内的内容。尝试使用该功能打开第二个accordion部分后，手动单击accordion标题时该部分甚至无法打开。这让我抓狂，想找出问题所在。有人知道我做错了什么吗？（如果编码没有缩进，很抱歉。这是我第一次在这里发布）谢谢当您查找要打开的手风琴面板的索引时，您正在搜索页面上的所有手风琴面板，而不仅仅是当前手风琴中的面板。这就是为什么索引对第一个选项卡有效，但对第二个选项卡无效。该数字根据第一个选项卡中的手风琴面板数关闭 改变
// Get the index of this accordion
accordionIndex = $(".accTable").index($accordionParent);
// Get the index of this accordion panel within this tab
accordionIndex = $accordionParent.closest('.accordionTabs').find('.accTable').index($accordionParent);