为什么我的导航栏切换按钮不起作用？

时间：2018-01-06 03:18:58

标签： jquery html css

下面是我的导航栏代码，我尝试为我的导航栏创建切换按钮，当它在一个小屏幕上但它不会工作。我的下拉菜单也不会工作。有人可以帮我解决这些问题。我是新手，任何帮助表示赞赏。有什么好的建议吗？

＆＃13;
＆＃13; 
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Landing Page</title>
  <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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="Stylesheet/Css_Reset.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="Stylesheet/bootstrap.min.css">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!--Navbar Header Start Here-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">  
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>  
                    </button>
        <a class="navbar-brand" href="#">Image</a>
      </div>
      <!--Navbar Header End Here-->
      <!--Menu Start Here-->
      <div class="collapse navbar-collapse" id="MainNavBar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Booking</a></li>
          <!--dropdown Menu Start-->
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
                           Product and Services
                            <span class="caret"></span>  
                        </a>
            <ul class="dropdown-menu">
              <li><a href="#">Studio</a></li>
              <li><a href="#">Event</a></li>
              <li><a href="#">Others</a></li>

            </ul>
          </li>
          <!--dropdown Menu End-->
          <li><a href="#">Contact Us</a></li>
        </ul>
        <!--Menu End Here-->
        <!--Right Aligned Menu Start-->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Login</a></li>
          <li><a href="#">Register Profile</a></li>
        </ul>
        <!--Right Aligned Menu End-->

      </div>
    </div>
  </nav>
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

试试这个代码段。我添加了所需的所有库。但建议如果您可以下载提到的脚本并将其放在本地文件夹中，而无需参考链接。

出于演示目的，我使用了在线脚本。

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Landing Page</title>
  <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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!--Navbar Header Start Here-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">  
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>  
                    </button>
        <a class="navbar-brand" href="#">Image</a>
      </div>
      <!--Navbar Header End Here-->
      <!--Menu Start Here-->
      <div class="collapse navbar-collapse" id="MainNavBar">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Booking</a></li>
          <!--dropdown Menu Start-->
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
                           Product and Services
                            <span class="caret"></span>  
                        </a>
            <ul class="dropdown-menu">
              <li><a href="#">Studio</a></li>
              <li><a href="#">Event</a></li>
              <li><a href="#">Others</a></li>

            </ul>
          </li>
          <!--dropdown Menu End-->
          <li><a href="#">Contact Us</a></li>
        </ul>
        <!--Menu End Here-->
        <!--Right Aligned Menu Start-->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Login</a></li>
          <li><a href="#">Register Profile</a></li>
        </ul>
        <!--Right Aligned Menu End-->

      </div>
    </div>
  </nav>
  <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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

下载链接 Bootstrap（CSS和JS文件）

https://getbootstrap.com/docs/4.0/getting-started/download/

如果要在本地包含文件，请参阅以下链接。 https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

如果您有其他疑问，请发表评论。干杯！

编辑导航栏到右侧 

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Landing Page</title>
  <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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!--Navbar Header Start Here-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">  
                            <span class="icon-bar"></span>  
                            <span class="icon-bar"></span>  
                            <span class="icon-bar"></span>  
                        </button>
        <a class="navbar-brand" href="#">Image</a>
      </div>
      <!--Navbar Header End Here-->
      <!--Menu Start Here-->
      <div class="collapse navbar-collapse" id="MainNavBar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Booking</a></li>
          <!--dropdown Menu Start-->
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
                               Product and Services
                                <span class="caret"></span>  
                            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Studio</a></li>
              <li><a href="#">Event</a></li>
              <li><a href="#">Others</a></li>

            </ul>
          </li>
          <!--dropdown Menu End-->
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Register Profile</a></li>
        </ul>
        <!--Menu End Here-->



      </div>
    </div>
  </nav>
  <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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

相关问题
最新问题