Question

我是jQuery和Visual Studio Environment的新手。我正在使用this link上的指南创建一个圆形导航菜单栏主要问题是在我已经提到所有jQuery和jQueryUI脚本的head部分。这是错误的屏幕截图。所有其他stackoverflow问题都无法解决这个问题。

enter image description here

代码如下。请帮忙！

提前致谢。

@{
      Layout = null;
 }

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>

<script src="~/Scripts/jquery-1.11.2.js"></script>

<link rel="stylesheet"  
href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/Scripts/modernizr-2.6.2.min.js"></script>
<script src="~/Scripts/polyfills.js"></script>
<script src="~/Scripts/classie.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<style>
    .cn-button { 
border:none;
background:none;
color: white;
text-align: Center;
font-size: 1.5em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #111;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
 background-color: #222;
}
</style>
<style>
    .csstransforms .cn-wrapper {
font-size:1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
transform: scale(0.1);
transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the   
navigation up */
.csstransforms .opened-nav {
border-radius: 50%;
transform: scale(1);
}
  </style>
  <style>
       .cn-overlay{
       width:100%
       height:100%;
       background-color: rgba(0,0,0,0.6);
       position:fixed;
       top:0;
       left:0;
       bottom:0;
       right:0;
       opacity:0;
       transition: all .3s ease;
       z-index:2;
       pointer-events:none;
     }

     /* Class added to the overlay via JavaScript to show it when navigation  
     is open */
     .cn-overlay.on-overlay{
          pointer-events:auto;
          opacity:1;
      }
     </style>
     <style>
    .csstransforms .cn-wrapper li {
        position: absolute;
        font-size: 1.5em;
        width: 10em;
        height: 10em;
        transform-origin: 100% 100%;
        overflow: hidden;
        left: 50%;
        top: 50%;
        margin-top: -1.3em;
        margin-left: -10em;
        transition: border .3s ease;
       }

       .csstransforms .cn-wrapper li a {
            display: block;
           font-size: 1.18em;
           height: 14.5em;
           width: 14.5em;
           position: absolute;
            bottom: -7.25em;
          right: -7.25em;
           border-radius: 50%;
           text-decoration: none;
           color: #fff;
           padding-top: 1.8em;
           text-align: center;
           transform: skew(-50deg) rotate(-70deg) scale(1);
           transition: opacity 0.3s, color 0.3s;
         }

            .csstransforms .cn-wrapper li a span {
               font-size: 1.1em;
               opacity: 0.7;
             }
          /* for a central angle x, the list items must be skewed by 90-x           
           degrees in our case x=40deg so skew angle is 50deg
           items should be rotated by x, minus (sum of angles - 180)2s (for  
           this demo) */

        .csstransforms .cn-wrapper li:first-child {
         transform: rotate(-10deg) skew(50deg);
      }

        .csstransforms .cn-wrapper li:nth-child(2) {
            transform: rotate(30deg) skew(50deg);
        }

       .csstransforms .cn-wrapper li:nth-child(3) {
             transform: rotate(70deg) skew(50deg)
          }

         .csstransforms .cn-wrapper li:nth-child(4) {
         transform: rotate(110deg) skew(50deg);
          }

        .csstransforms .cn-wrapper li:nth-child(5) {
              transform: rotate(150deg) skew(50deg);
            }

        .csstransforms .cn-wrapper li:nth-child(odd) a {
                  background-color: #a11313;
                background-color: hsla(0, 88%, 63%, 1);
            }

         .csstransforms .cn-wrapper li:nth-child(even) a {
                background-color: #a61414;
                background-color: hsla(0, 88%, 65%, 1);
             }

           /* active style */
          .csstransforms .cn-wrapper li.active a {
              background-color: #b31515;
              background-color: hsla(0, 88%, 70%, 1);
           }

            /* hover style */
         .csstransforms .cn-wrapper li:not(.active) a:hover,
         .csstransforms .cn-wrapper li:not(.active) a:active,
         .csstransforms .cn-wrapper li:not(.active) a:focus {
          background-color: #b31515;
          background-color: hsla(0, 88%, 70%, 1);
         }
         .csstransforms .cn-wrapper li:not(.active) a:focus {
         position: fixed; /* fix the "displacement" bug in webkit browsers  
         when using tab key */
       }
        </style>
       </head>
       <body>
            <div>
              <button class="cn-button" id="cn-button">+</button>
               <div class="cn-wrapper" id="cn-wrapper">
                   <ul>
                       <li><a href="#"><span class="icon-picture"></span> 
                         </a></li>
                      <li><a href="#"><span class="icon-headphones"></span> 
                         </a></li>
            <li><a href="#"><span class="icon-home"></span></a></li>
            <li><a href="#"><span class="icon-facetime-video"></span></a> 
                    </li>
                  <li><a href="#"><span class="icon-envelope-alt"></span> 
                    </a></li>
                   </ul>
             </div>
            <div id="cn-overlay" class="cn-overlay"></div>
            </div>
            <script>
                        $(document).ready(function(){

                        var button = document.getElementById('cn-button'),
                        wrapper = document.getElementById('cn-wrapper'),
                        overlay = document.getElementById('cn-overlay');

                       //open and close menu when the button is clicked
                          var open = false;
                        button.addEventListener('click', handler, false);
                      button.addEventListener('focus', handler, false);
                     wrapper.addEventListener('click', cnhandle, false);

                        function cnhandle(e) {
                        e.stopPropagation();
                   }

                 function handler(e) {
                 if (!e) var e = window.event;
                 e.stopPropagation();//so that it doesn't trigger click  
                  //event on document

                 if (!open) {
                       openNav();
                    }
                 else {
                      closeNav();
                     }
                 }
                 function openNav() {
                       open = true;
                       button.innerHTML = "-";
                       classie.add(overlay, 'on-overlay');
                       classie.add(wrapper, 'opened-nav');
                  }
                function closeNav() {
                       open = false;
                       button.innerHTML = "+";
                       classie.remove(overlay, 'on-overlay');
                       classie.remove(wrapper, 'opened-nav');
                     }
                 document.addEventListener('click', closeNav);

              });
       </script>
       </body>
       </html>

Answer 1

尝试另一个版本的jquery 下载min.js文件并将其放在本地目录中，并在src中提供有效路径。它可能对你有帮助。 http://jquery.com/download/

Answer 2

使用绝对或相对路径，例如。＆＃39; /js/jquery.js'使用webroot或＆＃39; ../ js / jquery.js＆＃39;取决于您从哪里调用文件（使用绝对路径更好）。请勿尝试使用~指示符。

而不是：

<script src="~/Scripts/jquery-1.11.2.js"></script>

使用：

<script src="/Scripts/jquery-1.11.2.js"></script>

取决于文件相对于webroot的位置。

Answer 3

您的jquery文件可能有问题。

尝试使用谷歌的在线版本。

1.x链接： https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

2.x链接： https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js“

Answer 4

我不知道问题是什么，但是我创建了一个新项目并逐个添加了所有.js脚本并且有效。

为什么我仍然得到“jQuery未定义”错误

4 个答案: