私は JQuery を初めて使用し、ページ上のタブ内の JQuery UI アコーディオン内のアンカーへのリンクがある関数を機能させようとすると問題が発生します。2 つのタブ (@ タブに 1 つ) に別のアコーディオン (2) があります。私は、ある程度機能するコードと機能しないコードをいくつかまとめました。ここに私が持っているものがあります:
<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>
最初のタブにある最初のアコーディオンでアンカーを開きますが、2番目のタブにある2番目のアコーディオンのアンカーへのリンクを開こうとすると不安定になります。ここの他の場所で見つけた「openTab」関数を変更し、コードを追加して、アンカーのあるアコーディオンセクションを開こうとしました。最初のアコーディオンでセクションを開くことは問題ありませんが、2番目のタブの2番目のアコーディオンでセクションを開こうとするとうまくいきません。アコーディオン セクションのインデックスと、アコーディオンがあるタブ インデックスを正しく見つけているようです。セクションが開かないか、セクションを選択してもセクション内のコンテンツが開かないことがあります。2番目のアコーディオンセクションを開く機能を使用しようとした後、セクションが開きません' アコーディオン ヘッダーを手動でクリックしても開きません。これは、問題を理解しようとして私を夢中にさせてきました。私が間違ったことについて何か考えがある人はいますか？（コーディングがインデントされていない場合は申し訳ありません。ここに投稿するのは初めてです）ありがとう