时间戳

首页 > 解决方案 > 创建一个指向页面并打开手风琴选项卡的链接

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

问题描述

我有一个 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），然后还在特定选项卡上打开手风琴（例如flush-collapseOne）。

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

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

我在正确的轨道上吗？

附言

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

标签： javascriptjquerybootstrap-5

解决方案

我已经通过使用一个sessionStorage对象解决了：

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

然后是 JavaScript 代码index.html：

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

推荐阅读