个人中心
gpt4 book ai didi

html - 导航栏不起作用

转载 作者：行者123 更新时间：2023-11-28 01:17:12 25 4
gpt4 key购买 nike

我不知道为什么我的导航栏不能在移动设备上使用，所以我正在寻求帮助。问题是切换按钮不显示。

<html>
Navbar (sit on top) 
<div class="w3-top">
  <div class="w3-bar w3-white w3-card" id="myNavbar">
    <a href="#home" class="w3-bar-item w3-button w3-wide">Start</a>
     Right-sided navbar links 
    <div class="w3-right w3-hide-small">
      <a href="#about" class="w3-bar-item w3-button">Field 1</a>
      <a href="#team" class="w3-bar-item w3-button"><i class="fa fa-user"></i> Field 2</a>
      <a href="#work" class="w3-bar-item w3-button"><i class="fa fa-th"></i> Field 3</a>
      <a href="#pricing" class="w3-bar-item w3-button"><i class="fa fa-usd"></i> Field 4</a>
      <a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> Field 5</a>
    </div>
     Hide right-floated links on small screens and replace them with a menu icon 

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

 Sidebar on small screens when clicking the menu icon 
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">X</a>
  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">Field 1</a>
  <a href="#team" onclick="w3_close()" class="w3-bar-item w3-button">Field 2</a>
  <a href="#work" onclick="w3_close()" class="w3-bar-item w3-button">Field 3</a>
  <a href="#pricing" onclick="w3_close()" class="w3-bar-item w3-button">Field 4</a>
   <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">Field 5</a> 
</nav>

它基于 w3schools-Template，所以我当然已经导入了所有内容。

CSS 文件:

使用的 JS:

非常感谢!

最佳答案

删除代码中的 style="display:none"并使用 Bootstrap ，您可以像这样拥有导航栏:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large"  id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">X</a>
  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">Field 1</a>
....
</nav>

关于html - 导航栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51749483/

25 4 0
文章推荐： javascript - 使用 jQuery addClass 更改背景图像
文章推荐： javascript - 如何使用javascript将图像随机插入到表格中？
文章推荐： c++ - 默认情况下不使用 std::next 的 Range-for 循环？
文章推荐： android - jQuery 移动文本字段不会失去焦点