从同一页面内的下拉菜单中打开一个选项卡答案

【问题标题】：Open a tab from dropdown menu within the same page从同一页面内的下拉菜单中打开一个选项卡
【发布时间】：2020-07-23 17:04:05
【问题描述】：

有没有办法将侧边栏下拉菜单中的项目链接到网页中的选项卡？

位于我的侧导航栏上的第 2 页下拉菜单在第 2 页中显示不同的选项卡，但是当从下拉列表中选择一个选项卡时，页面只会重定向到第 2 页的顶部。


<nav>
    <div class="container">
        <hr class="sidebar">
            <ul class="nav navbar">
                <li class="nav-item"><a class="nav-link" href="page1.html">PAGE 1</a></li>
                <li class="nav-item"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="page2.html" role="button" aria-haspopup="true" aria-expanded="false">PAGE 2</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#tab-1">One</a>
                        <a class="dropdown-item" href="#tab-2">Two</a>
                        <a class="dropdown-item" href="tab-3">Three</a>
                        </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="page2.html">PAGE 3</a></li>
                <li class="nav-item"><a class="nav-link" href="page3.html">PAGE 4</a></li>  
            </ul>
        </hr>       
    </div>
</nav>

【问题讨论】：

“标签”是什么意思？ dropdown-item 或 nav-item?
你在使用任何框架吗？
如 apena 所问，您将不得不解释“标签”的含义。人们在谈论网页和浏览器时使用“标签”一词时的含义有很多。如果它在您的页面中，显示它的标记。
@apena 我的网站有四个页面，可通过侧导航栏访问。我已将下拉项目放在侧边栏中的 PAGE 2 导航项目中。这些下拉项是导航项，位于第 2 页。侧边栏导航项在 HTML 页面之间可以正常工作，但单击下拉项时不会打开它们在第 2 页上对应的选项卡。我我想知道在 href 或类似的东西中是否缺少我的东西

标签： javascript html dropdown nav

【解决方案1】：

尝试将您要导航到的页面放在您的dropdown-items 的href 中的锚点前面。

所以改变：

<a class="dropdown-item" href="#tab-1">One</a>
<a class="dropdown-item" href="#tab-2">Two</a>
<a class="dropdown-item" href="tab-3">Three</a>

收件人：

<a class="dropdown-item" href="page2.html#tab-1">One</a>
<a class="dropdown-item" href="page2.html#tab-2">Two</a>
<a class="dropdown-item" href="page2.html#tab-3">Three</a>

【讨论】：