Question

我已经按照导航栏上的说明进行操作，但是单击切换按钮时它不显示页面。可能是问题所在？我正在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

您需要将要访问的网站链接到href。只需将＃替换为您网站的链接即可。如果您的html文档与index.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>

单击导航栏-切换栏时不显示页面

3 个答案: