여전히 "jQuery가 정의되지 않았습니다"오류가 발생하는 이유
user3024292
jQuery 및 Visual Studio 환경을 처음 사용합니다. 이 링크 의 가이드를 사용하여 원형 탐색 메뉴 모음을 만드는 작업을하고있었습니다 . 주요 문제는 모든 jQuery 및 jQueryUI 스크립트를 언급 한 헤드 섹션에 있습니다. 오류의 스크린 샷입니다. 다른 모든 스택 오버플로 질문으로는이 문제를 해결할 수 없습니다.
코드는 다음과 같습니다. 도와주세요!
미리 감사드립니다.
@{
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>
user3024292
나는 문제가 무엇인지 모르지만 새 프로젝트를 만들고 모든 .js 스크립트를 하나씩 추가했고 작동했습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
- 이전 게시물：JavaFX를 사용하는 TableView의 자동 증가가 정렬되지 않습니다.
- 다음 포스트：jQuery datatables tabletools 버튼이 표시되지 않았습니다.
관련 기사
Related 관련 기사
- 1
잡히지 않은 ReferenceError : JQuery가 정의되지 않았습니다.
- 2
잡히지 않은 ReferenceError : jQuery가 정의되지 않았습니다-requireJS
- 3
잡히지 않은 ReferenceError : 콘솔에서 작동하는 경우에도 jQuery가 정의되지 않았습니다.
- 4
jQuery 라이브러리에 대한 meteor 래퍼 패키지를 만드는 동안 jQuery가 정의되지 않았습니다.
- 5
"Jquery가 정의되지 않았습니다"오류를 해결하는 방법은 무엇입니까?
- 6
Vue js-잡히지 않은 ReferenceError 얻기 : jQuery가 정의되지 않았습니다.
- 7
Json 파일 크기를 구문 분석하는 JQuery가 정의되지 않았습니다.
- 8
Rails : 페이지를 새로 고친 후 jQuery가 정의되지 않았습니다.
- 9
Flask 및 jQuery '$'가 정의되지 않았습니다.
- 10
VueJS-Jquery가 정의되지 않았습니다.
- 11
Adobe Edge Preloader JQuery / $가 정의되지 않았습니다.
- 12
Jquery '$'가 정의되지 않았습니다.
- 13
Jquery가 정의되지 않았습니다.
- 14
각 하위 목록 키는 고유하지만 콘솔에 여전히 오류가 발생합니다. Reactjs
- 15
이 오류가 발생하는 이유
- 16
자바 스크립트에서 여전히 객체 객체 오류가 발생하는 이유는 무엇입니까?
- 17
CFBundleVersion : 유효성 검사시 여전히 오류가 발생합니다.
- 18
이렇게 for 루프를 사용하지만 여전히 IndexError가 발생하는 이유는 무엇입니까?
- 19
값 오류가 발생하는 이유
- 20
"AttributeError"오류가 발생하는 이유
- 21
easy : search를 사용하여 "index is not defined"오류가 발생하는 이유
- 22
VS 2019에서 인텔리전스 오류가 발생하는 이유
- 23
여전히 " 'SwiftyDropbox'모듈이 없습니다."라는 오류가 발생합니다.
- 24
파일이 존재하지 않지만 여전히 오류가 발생합니다.
- 25
봄에 웹 소켓을 사용 하여이 오류가 발생하면 잡히지 않은 유형 오류 : onrecieve는 함수가 아닙니다 (..) stomp.js
- 26
다음 코드에서 잡히지 않은 유형 오류가 발생하는 이유는 무엇입니까?
- 27
캐릭터가 완전히로드되었을 때이 오류가 발생하는 이유는 무엇입니까?
- 28
여기에서 "함수가 아닙니다"라는 오류가 발생하는 이유는 무엇입니까?
- 29
Lambda를 사용하여이 오류가 발생하는 이유는 무엇입니까?
몇 마디 만하겠습니다