html - 如何修复指向子页面标签的超链接？ Bootstrap 4

Question

我正在做我的第一个大元素。我几乎构建了所有内容，但菜单有问题。单击菜单中的链接会打开子页面，但不会转到标签。

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
    <span class="caret"></span>
Nurty</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
    <a class="dropdown-item" href="/nurty.html">Techouse</a>
    <a class="dropdown-item" href="/nurty.html#minit">Minimal</a>
    <a class="dropdown-item" href="/nurty.html#classt">Classic</a>
    <a class="dropdown-item" href="/nurty.html#detrt">Detroit</a>
    <a class="dropdown-item disabled" href="/nurty.html#hardgroove">Hardgroove</a>
    <a class="dropdown-item" href="/nurty.html#hart">Hard</a>
</div>

在子页面中，我想转到这个标签:

<section id="minit">

但还是不行。

我该如何修复它或者是否有其他方法可以修复它？

Answer 1

这是您需要的工作示例，我还通过添加 css smooth-behavior: smooth 添加了 smooth scoll，我添加了 1500px 高度以便清楚地查看您的问题

Index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">


<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
        <span class="caret"></span>
        Nurty
    </a>
    <div class="dropdown-menu aria-labelledby=dropdown_target">
        <a class="dropdown-item" href="example.html">Techouse</a>
        <a class="dropdown-item" href="example.html#minit">Minimal</a>
        <a class="dropdown-item" href="example.html#classt">Classic</a>
        <a class="dropdown-item" href="example.html#detrt">Detroit</a>
        <a class="dropdown-item disabled" href="example.html#hardgroove">Hardgroove</a>
        <a class="dropdown-item" href="example.html#hart">Hard</a>
    </div>
</li>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

example.html

<style>
html {
    scroll-behavior: smooth;
}
</style>

<div style="height: 1500px;"></div> <!-- FOR SCROLL VIEW -->
<section id="minit">scroll or die</section>