创建一个 link 转到页面并打开手风琴选项卡

Question

我有一个 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...]

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

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

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

我走在正确的轨道上吗？

PS

我只是想我可以存储一个会话存储 cookie，比如 fromDiffPage: True，当从另一个页面单击 link，然后在我的 index.html 页面，如果该参数为真，则打开该选项卡。冷那行吗？

Answer 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";
    }

创建一个 link 转到页面并打开手风琴选项卡

Create a link that goes to page and opens an accordion tab

javascript

jquery

bootstrap-5