链接多个href到accordion并打开相应的部分- Jquery

Question

我有多个href需要链接到页面底部的适当手风琴。我现在的代码可以工作，但是我正在努力减少重复函数的次数，因为我的一位同事指出它们是不切实际的。我已经试过了。哈希解，但对我不起作用。如有任何意见，不胜感激。

window.contentAssetInitFunctions.push(function() {
$(document).ready(function() {
$("#start").click(function() {
$('#startExchange, #startHeader').addClass('active');
$('#packingSlip, #packingHeader').removeClass('active');
});
$("#pack").click(function() {
$('#packingSlip, #packingHeader').addClass('active');
$('#startExchange, #startHeader').removeClass('active');
});
});
});

<a href="#startHeader" id="start" class="text-link">Learn How</a>
<a href="#packingHeader" id="pack" class="text-link">Learn How</a>
<a class="question" id="startHeader"> EXCHANGE</a>
<div class="answer" id="startExchange">
content
</div>
<a class="question" id="packingHeader">HOW TO START AN EXCHANGE WITH A PACKING SLIP</a>
<div class="answer" id="packingSlip">
content
</div>

Answer 1

如果用容器标签(如article或div)包装每个问题/答案，那么您可以针对整个部分，而不必使用自定义id挑选问题和答案。

下面您将看到我添加了一个包装器article标记，该标记带有描述该部分的id。然后javascript删除所有活动标签，然后从href中抓取id，发现article并向该标签添加活动标签。

像这样:

$(document).ready(function () {
$(".text-link").click(function () {
let section = $(this).attr('href').substr(1);
$('article .question, article .answer').removeClass('active')
$(`#${section} .question, #${section} .answer`).addClass('active')
});
});

<a href="#start" class="text-link">Learn How</a>
<a href="#packing" class="text-link">Learn How</a>
<article id="start">
<a class="question"> EXCHANGE</a>
<div class="answer">
content
</div>
</article>
<article id="packing">
<a class="question">HOW TO START AN EXCHANGE WITH A PACKING SLIP</a>
<div class="answer">
content
</div>
</article>