JQuery迷你菜单 - 导航不起作用

第一篇文章。我一直将网页设计作为我角色的一小部分，并且依赖于额外使用CSS模板。只是想让你知道我在哪里。我最近使用了一个包含“迷你菜单”的模板（一个仅在页面宽度较窄时才显示的下拉导航菜单）。出于某种原因导航无法正常工作。如果我在列表中选择一个页面，它不会导航到该页面。这可能是一个真正的新手问题，但我尝试过使用代码，而且我不能为了我的生活而努力工作。JQuery迷你菜单 - 导航不起作用

下面是我有的HTML。任何建议将非常感激。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    
 

 
    <title>Capita - BIM Level 2 Training</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/component.css"> 
 
    <link rel="stylesheet" href="css/custom-styles.css"> 
 
    <link rel="stylesheet" href="css/font-awesome.css"> 
 
\t 
 
     
 
\t <link rel="stylesheet" href="css/demo.css"> 
 
    <link rel="stylesheet" href="css/font-awesome-ie7.css"> 
 
\t 
 
     <script src="js/jquery.mobilemenu.js"></script> 
 
     <script src="js/html5shiv.js"></script> 
 
     <script src="js/respond.min.js"></script> 
 
     <script> 
 
    $(document).ready(function(){ 
 
     $('.menu').mobileMenu(); 
 
    }); 
 
    </script> 
 
    
 
    </head> 
 

 
    <body> 
 
    <div class="header-wrapper"> 
 
     <div class="site-name"> 
 
     <a href="index.html"><p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive"></a> 
 
\t \t <h1>BIM Level 2 Training</h1> 
 
     <h2>This training is for internal use only</h2> 
 
     </div> 
 
    </div> 
 
    <div class="menu"> 
 
     <div class="navbar"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <i class="fw-icon-th-list"></i> 
 
      </button> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="#">Modules</a></li> 
 
       <li><a href="#">BIM4Capita</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div><!--/.navbar-collapse --> 
 
     </div> 
 
     </div> 
 
     <div class="mini-menu"> 
 
      <label> 
 
      <select class="selectnav"> 
 
      <option value="#" selected="">Home</option> 
 
      <option value="#">About</option> 
 
      <option value="#">→ Another action</option> 
 
      <option value="#">→ Something else here</option> 
 
      <option value="#">→ Another action</option> 
 
      <option value="#">→ Something else here</option> 
 
      <option value="#">Services</option> 
 
      <option value="#">Work</option> 
 
      <option value="#">Contact</option> 
 
      </select> 
 
      </label> 
 
      </div> 
 
    </div> 
 

 

 
    
 
    </div> 
 
    <div class="container"> 
 
     <div class="featured-block"> 
 
     <!-- Example row of columns --> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
      <div class="block"> 
 
      <div class="thumbnail"> 
 
       <a href="WhatIsBIM.html"><img src="img/img1.jpg" alt="" class="img-responsive"></a> 
 
       <div class="caption"> 
 
       <h1>What is BIM?</h1> 
 
       <p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p> 
 
       <a class="btn" href="whatisbim.html">more</a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="block"> 
 
       <div class="thumbnail"> 
 
        <img src="img/img2.jpg" alt="" class="img-responsive"> 
 
        <div class="caption"> 
 
         <h1>Benefits of BIM</h1> 
 
         <p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p> 
 
         <a class="btn" href="#">more</a> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="block"> 
 
       <div class="thumbnail"> 
 
        <a href="BIMTech.html"><img src="img/img3.jpg" alt="" class="img-responsive"></a> 
 
        <div class="caption"> 
 
        <h1>BIM Technology</h1> 
 
        <p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p> 
 
        <a class="btn" href="BIMTech.html">more</a> 
 
        </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
      <div class="block"> 
 
      <div class="thumbnail"> 
 
       <img src="img/img4.jpg" alt="" class="img-responsive"> 
 
       <div class="caption"> 
 
       <h1>BIM Workflow</h1> 
 
       <p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p> 
 
       <a class="btn" href="#">more</a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
      <div class="block"> 
 
      <div class="thumbnail"> 
 
       <img src="img/img9.jpg" alt="" class="img-responsive"> 
 
       <div class="caption"> 
 
       <h1>Capita Examples</h1> 
 
       <p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p> 
 
       <a class="btn" href="#">more</a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      
 
     
 
      
 
      
 
      
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 

 
     
 

 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="js/jquery-1.9.1.js"></script> 
 
    <script src="js/bootstrap.js"></script> 
 
    <script src="js/modernizr-2.6.2-respond-1.1.0.mi 
 
    
 
    </body> 
 
</html>

的JS文件夹包含，

bootstrap.js
html5shiv.js
的jquery-1.9.1.js
Modernizr的-2.6。 2-respond-1.1.0.min.js
respond.min.js

在Google Chrome中使用Inspect时出现以下错误;

未能加载资源：28未捕获的ReferenceError：$不是在限定的index.html ：28 /favicon.ico服务器与404 （未找到）
index.html的一个状态响应
无法加载资源：服务器与404（未找到）

来源

2017-07-19 Rob Clark

不确定状态，因为你的代码是不是在这里完成回答，但我认为你正在使用的document.ready之前，jQuery是加载。您的

<script> 
    $(document).ready(function(){ 
     $('.menu').mobileMenu(); 
    }); 
    </script>

必须在文档的末尾，在您导入所有库之后。而jQuery必须是列表中的第一个（甚至在jquery.mobilemenu之前），因为其他人将使用它。

您可以打开控制台来检查是否有像$这样的错误是未知的，这意味着您的代码或库在jQuery之前加载。

这里有一个更新版本的代码与正确顺序的库。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 


    <title>Capita - BIM Level 2 Training</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/component.css"> 
    <link rel="stylesheet" href="css/custom-styles.css"> 
    <link rel="stylesheet" href="css/font-awesome.css"> 


    <link rel="stylesheet" href="css/demo.css"> 
    <link rel="stylesheet" href="css/font-awesome-ie7.css"> 

    </head> 

    <body> 
    <div class="header-wrapper"> 
     <div class="site-name"> 
     <a href="index.html"><p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive"></a> 
     <h1>BIM Level 2 Training</h1> 
     <h2>This training is for internal use only</h2> 
     </div> 
    </div> 
    <div class="menu"> 
     <div class="navbar"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <i class="fw-icon-th-list"></i> 
      </button> 
      </div> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="#">Modules</a></li> 
       <li><a href="#">BIM4Capita</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div><!--/.navbar-collapse --> 
     </div> 
     </div> 
     <div class="mini-menu"> 
      <label> 
      <select class="selectnav"> 
      <option value="#" selected="">Home</option> 
      <option value="#">About</option> 
      <option value="#">→ Another action</option> 
      <option value="#">→ Something else here</option> 
      <option value="#">→ Another action</option> 
      <option value="#">→ Something else here</option> 
      <option value="#">Services</option> 
      <option value="#">Work</option> 
      <option value="#">Contact</option> 
      </select> 
      </label> 
      </div> 
    </div> 



    </div> 
    <div class="container"> 
     <div class="featured-block"> 
     <!-- Example row of columns --> 
     <div class="row"> 
      <div class="col-md-3"> 
      <div class="block"> 
      <div class="thumbnail"> 
       <a href="WhatIsBIM.html"><img src="img/img1.jpg" alt="" class="img-responsive"></a> 
       <div class="caption"> 
       <h1>What is BIM?</h1> 
       <p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p> 
       <a class="btn" href="whatisbim.html">more</a> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="block"> 
       <div class="thumbnail"> 
        <img src="img/img2.jpg" alt="" class="img-responsive"> 
        <div class="caption"> 
         <h1>Benefits of BIM</h1> 
         <p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p> 
         <a class="btn" href="#">more</a> 
        </div> 
       </div> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="block"> 
       <div class="thumbnail"> 
        <a href="BIMTech.html"><img src="img/img3.jpg" alt="" class="img-responsive"></a> 
        <div class="caption"> 
        <h1>BIM Technology</h1> 
        <p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p> 
        <a class="btn" href="BIMTech.html">more</a> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"> 
      <div class="block"> 
      <div class="thumbnail"> 
       <img src="img/img4.jpg" alt="" class="img-responsive"> 
       <div class="caption"> 
       <h1>BIM Workflow</h1> 
       <p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p> 
       <a class="btn" href="#">more</a> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      <div class="block"> 
      <div class="thumbnail"> 
       <img src="img/img9.jpg" alt="" class="img-responsive"> 
       <div class="caption"> 
       <h1>Capita Examples</h1> 
       <p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p> 
       <a class="btn" href="#">more</a> 
       </div> 
       </div> 
      </div> 
      </div> 





      </div> 
     </div> 
     </div> 
     </div> 




    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
    <script src="js/jquery.mobilemenu.js"></script> 
    <script src="js/html5shiv.js"></script> 
    <script src="js/respond.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     $('.menu').mobileMenu(); 
     }); 
    </script> 

    </body> 
</html>

来源

2017-07-19 09:51:12

感谢尼科，真的感谢您抽出宝贵的时间不知道什么是“控制台”？看来，该脚本确实已经在图书馆被加载下。你说我的代码是不完整的。我可以发布其他任何内容来说明问题是什么吗？非常感谢， –

如果你在铬按f12打开控制台。在编写JavaScript时，您需要随时打开它，以便您可以看到任何错误。检查控制台是否有任何错误，如果是这样，请将它们发布到此处，以便我可以帮助您！ –

谢谢Nico，这些错误是，加载资源失败：服务器响应状态为404（未找到） index.html：28 Uncaught ReferenceError：$未定义 at index.html：28 /favicon.ico无法加载资源：服务器响应状态为404（未找到） –

JQuery迷你菜单 - 导航不起作用

回答

相关问题