导航栏上的问题 - 单击时切换栏不显示页面
Issues on Navigation bar- toggle bar when clicked doesn't show the pages
我已经按照导航栏上的说明进行操作,但是当点击切换按钮时它没有显示 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>
在 <button>
标签中试试这个
onclick="document.location='link.html'"
(link.html) 应该是您要打开的任何页面
您需要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>
您需要从按钮中删除 .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>
我已经按照导航栏上的说明进行操作,但是当点击切换按钮时它没有显示 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>
在 <button>
标签中试试这个
onclick="document.location='link.html'"
(link.html) 应该是您要打开的任何页面
您需要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>
您需要从按钮中删除 .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>