时间戳

首页 > 解决方案 > nav-pills url 在页面刷新时丢失

javascript - nav-pills url 在页面刷新时丢失

问题描述

使用包装在导航选项卡子菜单中的 bs4 切换导航药丸时遇到以下问题：

  1. 下一个 url 不会加载带有 id option2: http://localhost/test#option2的药丸，尽管如果我点击它，它会切换到那个药丸。
  2. 当我使用 id option2 的药丸并进行页面刷新时，它会返回到第一个药丸 - 具有 id option1 的药丸

  3. 我需要为每个药丸提供一个功能链接，该链接应该打开该特定药丸，并且应该在页面刷新时保持不变——我认为它被称为深度链接，但我发现的示例要么不同，要么旧。

    <nav>
    <div class="nav nav-tabs" id="nav-tab" >
        <a class="nav-item nav-link disabled" id="nav-menu1-tab" href="#">menu1</a>
        <a class="nav-item nav-link  active" id="nav-menu2-tab" href="#nav-menu2">active-tab</a>
        <a class="nav-item nav-link disabled" id="nav-menu3-tab" href="#">menu3</a>
    </div>
</nav>


<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-menu2"></div>

    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="pills-option1-tab" data-toggle="pill" href="#option1" role="tab" aria-controls="pills-option1" aria-selected="true">option1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-option2-tab" data-toggle="pill" href="#option2" role="tab" aria-controls="pills-option2" aria-selected="false">option2</a>
        </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="option1" role="tabpanel" aria-labelledby="pills-option1-tab">option1...</div>
        <div class="tab-pane fade" id="option2" role="tabpanel" aria-labelledby="pills-option2-tab">option2...</div>
    </div>

</div>

标签： javascriptbootstrap-4

解决方案

推荐阅读