我有一个朋友目前正在使用 Bootstrap 和 MDB（Bootstrap 的材料设计）开发 HTML/CSS 网站。他试图让导航栏控制一个部分（使用引导程序/MDB Pills 系统传输和显示内容）。如果您查看图像，他希望链接 L-1 打开并将您传送到第 2 部分，其中也有药丸，以便更改第 2 部分中的内容。因此，L-1需要作为锚点，同时保持 Pills 的作用，以改变Section-2 的内容。（链接到 MDB - Pills 文档）
问题是 L-1 或 L-2 或 L-3不能在他的代码中用作锚点，即使使用 id=" AnchorName " 和 href="# AnchorName "。它们目前像 Pills 一样工作并加载动态内容，但传输部分不起作用。
知道他怎么能解决这个问题吗？
这是他的代码的 HTML 测试（您可以运行代码进行测试，看看我所说的“没有运输到锚点”的意思）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav nav-pills mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="ex1-tab-1"
data-mdb-toggle="pill"
href="#ex1-pills-1"
role="tab"
aria-controls="ex1-pills-1"
aria-selected="true"
>Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex1-tab-2"
data-mdb-toggle="pill"
href="#ex1-pills-2"
role="tab"
aria-controls="ex1-pills-2"
aria-selected="false"
>Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex1-tab-3"
data-mdb-toggle="pill"
href="#ex1-pills-3"
role="tab"
aria-controls="ex1-pills-3"
aria-selected="false"
>Tab 3</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="bloc-0" style="height: 750px; background-color: lightgrey">
fixed content section
</section>
<section class="bloc-1" style="background-color: grey; height: 500px;">
<!-- Pills content -->
<div class="tab-content" id="ex1-content">
<div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab 1 content
<!-- Pills navs -->
<ul class="nav nav-pills mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="section-1-1"
data-mdb-toggle="pill"
href="#ex2-pills-1"
role="tab"
aria-controls="ex1-pills-1"
aria-selected="true"
>Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="section-1-2"
data-mdb-toggle="pill"
href="#ex2-pills-2"
role="tab"
aria-controls="ex1-pills-2"
aria-selected="false"
>Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="section-1-3"
data-mdb-toggle="pill"
href="#ex2-pills-3"
role="tab"
aria-controls="ex1-pills-3"
aria-selected="false"
>Tab 3</a>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content" id="ex1-content">
<div class="tab-pane fade show active" id="ex2-pills-1" role="tabpanel" aria-labelledby="section-1-1">
Tab 1-1 content
</div>
<div class="tab-pane fade" id="ex2-pills-2" role="tabpanel" aria-labelledby="section-1-2">
Tab 1-2 content
</div>
<div class="tab-pane fade" id="ex2-pills-3" role="tabpanel" aria-labelledby="section-1-3">
Tab 1-3 content
</div>
</div>
<!-- Pills content -->
</div>
<div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">
tab-2 content
</div>
<div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">
tab-3 content
</div>
</div>
<!-- Pills content -->
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>
</body>
</html>