Question

我几乎使用确切的W3schools示例来折叠navbars，但它不起作用。我确定我忽视了一些东西，但似乎无法指出它。附件是我的HTML代码。干杯！

＆＃13;

<script type="text/javascript" src="assets/js/modernizr.min.js"></script>
	  <script type="text/javascript" >
	    openTab("Home")

		function openTab(tabName) {
		  var i;
		  var x = document.getElementsByClassName("tab");
		  for (i = 0; i < x.length; i++) {
		    x[i].style.display = "none";
		  }
		  document.getElementById(tabName).style.display = "block";
		}
</script>

＆＃13;

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
        	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
		        <span class="sr-only">Menu</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span> 
      		</button>
          <a class="navbar-brand" href="#">Company Name</a>
        </div>
            <div class="navbar-collapse collapse" id="myNavbar">
		        <ul class="nav navbar-nav navbar-right">
		          <li><a href="#"  onclick="openTab('Home')">Home</a></li>
		          <li><a href="#" onclick="openTab('About')">About Us</a></li>
		          <li><a href="#" onclick="openTab('Products')">Products</a></li> 
		          <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
		        </ul>
	       </div>
     </div>
    </nav>

＆＃13;

Answer 1

您提供的代码段是正确的。问题背后的主要原因是缺少bootstrap或jQuery文件。请包含以下行，请再次运行代码。

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

Answer 2

您应该包含正确的<head>标记。以下代码应该可以正常工作：

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
        	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
		        <span class="sr-only">Menu</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span> 
      		</button>
          <a class="navbar-brand" href="#">Company Name</a>
        </div>
            <div class="navbar-collapse collapse" id="myNavbar">
		        <ul class="nav navbar-nav navbar-right">
		          <li><a href="#"  onclick="openTab('Home')">Home</a></li>
		          <li><a href="#" onclick="openTab('About')">About Us</a></li>
		          <li><a href="#" onclick="openTab('Products')">Products</a></li> 
		          <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
		        </ul>
	       </div>
     </div>
    </nav>

Answer 3

只需复制，粘贴和替换您的内容它工作正常。很可能你缺少bootstrap文件。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
	        <span class="sr-only">Menu</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span> 
  		</button>
      <a class="navbar-brand" href="#">Company Name</a>
      </div>
        <div class="navbar-collapse collapse" id="myNavbar">
	        <ul class="nav navbar-nav navbar-right">
	          <li><a href="#"  onclick="openTab('Home')">Home</a></li>
	          <li><a href="#" onclick="openTab('About')">About Us</a></li>
	          <li><a href="#" onclick="openTab('Products')">Products</a></li> 
	          <li><a href="#" onclick="openTab('Contact')">Contact Us</a></li> 
	        </ul>
       </div>
   </div>
  </nav>
</body>
</html>

Answer 4

将这4行包含在您的头标记中

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

为什么Bootstrap Navbar没有崩溃？

4 个答案: