JQuery는 콘솔에 입력 할 때만 작동합니다.

클릭하면 콘텐츠가 페이드 인 및 아웃되는 간단한 탐색 모음을 만들려고합니다. 그러나, 내 fadeOut() jQuery를 호출하면 경고가 나타나는 동안 div 요소가 사라지지 않습니다. fadeOut() 행을 복사하여 콘솔에 붙여 넣으면 요소가 희미 해집니다. 누구든지 왜 fadeOut()이 작동하지 않는지 알 수 있습니까? 어떤 도움이나 조언도 환영합니다!JQuery는 콘솔에 입력 할 때만 작동합니다.

HTML

<!DOCTYPE html> 
<head> 
    <link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA=screen> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="./js/main.js"></script> 
</head> 
<html> 
<body> 

<ul> 
    <li><a class=active id="home-btn" href="">Home</a></li> 
    <li><a id="about-btn" href="">About me</a></li> 
    <li><a href="./data/resume.pdf">Resume</a></li> 
    <li><a id="contact-btn" href="">Contact</a></li> 
</ul> 

<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;"> 
    <p>Hi, I'm Austin. Check out my site.</p> 
</div> 

</body> 
</html>

JS

$(document).ready(function(){ 
    $("#about-btn").click(function() { 
    $("#home").fadeOut("slow"); 
    alert("clicked"); 
    }); 
});

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 20%; 
    height: 100% 
    background-color: #f1f1f1; 
    position: fixed; /* Make it stick, even on scroll */ 
    overflow: auto; /* Enable scrolling if the sidenav has too much content */ 
} 

li a { 
    text-align: center; 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

/* Change the link color on hover */ 
li a:hover { 
    background-color: #555; 
    color: white; 
} 

.active { 
    background-color: #6b8d2f; 
    color: black; 
}

출처

2016-10-06 austin

경고가 차단 기능입니다 도움이되기를 바랍니다. JS가 경고가 닫힐 때까지 실행되지 않습니다. – evolutionxbox

click() 함수가 실행되고 있는지 확인하기 위해서만 삽입했습니다. 경고가 없어도 아무것도 사라지지 않습니다. – austin

왜 2 개의 jquery 버전을 포함하고 있습니까? – Alex

를 볼 수 있도록로 preventDefault해야합니다. 기본 이벤트를 방지해야합니다. 이에 JS 변경 :

$(document).ready(function(){ 
    $("#about-btn").click(function(event) { 
    event.preventDefault(); // the new line 
    $("#home").fadeOut("slow"); 
    }); 
});

출처

2016-10-06 08:51:47 Derek

당신은 당신이 a 요소에 click 이벤트를 사용하고 있기 때문입니다 출력

$(document).ready(function(){ 
 
    $("#about-btn").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#home").fadeOut("slow"); 
 
    }); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 20%; 
 
    height: 100% 
 
    background-color: #f1f1f1; 
 
    position: fixed; /* Make it stick, even on scroll */ 
 
    overflow: auto; /* Enable scrolling if the sidenav has too much content */ 
 
} 
 

 
li a { 
 
    text-align: center; 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 
.active { 
 
    background-color: #6b8d2f; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a class=active id="home-btn" href="">Home</a></li> 
 
    <li><a id="about-btn" href="">About me</a></li> 
 
    <li><a href="./data/resume.pdf">Resume</a></li> 
 
    <li><a id="contact-btn" href="">Contact</a></li> 
 
</ul> 
 

 
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;"> 
 
    <p>Hi, I'm Austin. Check out my site.</p> 
 
</div>

출처

2016-10-06 08:51:33

안녕하세요 버튼의 기본 그것은 것 행동 또한 경고와 함께 작동을 방지하기 위해 jquery.Use 방지 기본 아래이 시도! 당신이 fadeout.If하기 전에 사용하는 경우는 페이드 아웃 그래도 작동하지만 훨씬 visilable 수 wont't 후 .. 사용이

$(document).ready(function(){ 
$("#about-btn").on('click',function(e) { 
e.preventDefault(); 
alert("clicked"); 
$("#home").fadeOut("slow"); 
}); 
});

출처

2016-10-06 08:53:46

JQuery는 콘솔에 입력 할 때만 작동합니다.

답변

관련 문제