创建一个指向页面并打开手风琴选项卡的链接答案

【问题标题】：Create a link that goes to page and opens an accordion tab创建一个指向页面并打开手风琴选项卡的链接
【发布时间】：2021-06-21 06:50:13
【问题描述】：

我有一个 bootstrap 5 手风琴：

<div class="accordion" id="accordionIndexPage">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        <i class="fa fa-info-circle"></i> &nbsp; Summary
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionIndexPage">
      <div class="accordion-body">
[something]
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
[etc...]

我想在我的导航菜单中创建一个链接，当从任何页面单击该链接时，它会将用户定向到手风琴所在的页面 (index.html)，然后还可以在特定选项卡上打开手风琴（例如 @ 987654323@)。

我从 Bootstrap 的网站获得了精简代码：

var myCollapse = document.getElementById('flush-collapseOne')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

我走对了吗？

附言

我只是想我可以存储一个会话存储cookie，比如fromDiffPage: True，当一个人点击另一个页面的链接，然后在我的index.html页面中放置一个JavaScript，如果该参数为真，则打开它标签。冷的工作？

【问题讨论】：

比 cookie 更简单的选项是包含选项卡作为 url 的一部分（例如，作为路径或查询参数）吗？例如。 mywebsite/mypage?tab=tabTwo。然后，您可以使用 JavaScript 检查并切换相应的选项卡。
谢谢，它可以工作，当然。但是，如果我已经在 index.html 页面中呢？每次单击导航链接时，我都需要进行检查。我最后用 sessionStorage cookie 解决了，我觉得它更整洁。
好的 - 很高兴您找到了解决方案 :)。使用 URL 选项，您将不必总是通过 URL 选择选项卡，尽管使用声明性路由很常见。您可以使用常规 JavaScript 回调正常切换，并在页面第一次加载时检查 url 中的参数。另外，我会小心区分会话存储 API 和 cookie，它们并不完全相同
是的，关于sessionStorage 不是饼干的好电话，我很着急，找不到合适的术语。感谢您的建议。

标签： javascript jquery bootstrap-5

【解决方案1】：

我已经用sessionStorage object解决了：

<a class="nav-link" onclick="sessionStorage.setItem('fromNav', 'prints');" href="/">Summary</a>

然后是index.html中的JavaScript代码：

    if (sessionStorage.getItem('fromNav') == 'prints') {
      new bootstrap.Collapse(document.getElementById('flush-collapseOne'), {
        toggle: true
      })
      sessionStorage.setItem('fromNav', '')
      window.location.href = "#flush-headingOne";
    }

【讨论】：