JQueryはコンソールで入力したときにのみ機能します。

クリックしたときに内容をフェードインまたはフェードアウトする簡単なナビゲーションバーを作成しようとしています。しかし、私ののjQueryコールは、アラートが表示されている間、div要素が消えることはありません。行をコピーしてコンソールに貼り付けると、要素は消えます。誰もがが動作していない理由を見ることができますか？どんな助けやヒントもありがとう！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はコンソールで入力したときにのみ機能します。

答えて

関連する問題