导航栏上的问题 - 单击时切换栏不显示页面

Question

我已经按照导航栏上的说明进行操作，但是当点击切换按钮时它没有显示 pages.What 可能是问题所在？我正在研究 windows 10。下面是 HTML 代码。

  <nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
           </div>
        </div>

         
    </nav>

Answer 1

在 <button> 标签中试试这个

onclick="document.location='link.html'"

(link.html) 应该是您要打开的任何页面

Answer 2

您需要link您要访问的站点到 href。只需将 # 替换为您网站的 link 即可。如果 html 文档与 index.html

位于同一文件夹中，则您也不需要在 html 文档前面添加 ./

  <nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="ristorante.html">Ristorante con Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="menu.html">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                </ul>
           </div>
        </div>

         
    </nav>

Answer 3

您需要从按钮中删除 .navbar-toggler，因为默认情况下它使用 display:none;

然后您还需要从 #Navbar 中删除 .navbar-collapse，因为它会强制使用 display: flex !important 显示该项目。

<nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
    <div class="container">
        <button type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
            Text
        </button>
        <a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
        <div class="collapse" id="Navbar">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
       </div>
    </div>
</nav>

仔细检查您是否添加了 jQuery 库和 Bootstrap Js。如果没有，您可以参考下面的链接。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

导航栏上的问题 - 单击时切换栏不显示页面

Issues on Navigation bar- toggle bar when clicked doesn't show the pages

html

bootstrap-4

navbar

nav

togglebutton