-1
jQueryコードがブートストラップで動作しません。 bootstrap.cssへのリンクを削除すると、jQueryが動作します。私はBootstrapに精通していませんが、プロジェクトに使用する必要があります。 BootstrapでjQueryを使うにはどうすればいいですか？jQueryコードがブートストラップで動作しない
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="holidaybaking3.css" rel="stylesheet">
</head>
<body>
<div id="snowflakeContainer">
<p class="snowflake">*</p>
</div>
<div class="container">
<div class="row">
<header class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img src="header2.png" style="width:100%">
</header>
</div> <!-- /.row -->
</div> <!-- /.container -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="holidaybaking4.html">Home</a></li>
<li class="active"><a href="cookies2.html">Gingerbread Men</a></li>
<li><a href="photos2.html">Photos</a></li>
<li><a href="resources2.html">Resources</a></li>
</ul>
</div>
</nav>
<article>
<div class="container">
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Gingerbread Men</h1>
<div id="gingerbreadmeningredients" style="display: none;">
<img src="gingerbreadmenlist.png">
<br>
<button id="close">Close</button>
</div>
<div id="leftside" style="padding-top:20px">
<img class="hidden" src="step1.png">
<img class="hidden" src="step2.png">
<img class="hidden" src="step3.png">
<img class="hidden" src="step4.png">
<img class="hidden" src="step5.png">
<img class="hidden" src="step6.png">
<img class="hidden" src="step7.png">
<img class="hidden" src="step8.png">
<img class="hidden" src="step9.png">
</div>
<div id="rightside">
<button id="next">Next</a>
<button id="prev">Back</a>
</div>
<p id="ingredients">Click here for the ingredients</p>
</article>
<script src="fallingsnow_v6.js"></script>
<script src="jquery-3.js"></script>
<script>
$(function(){
$("#gingerbreadmeningredients").hide();
$("#ingredients").click(function(){
$("#gingerbreadmeningredients").fadeIn();
});
$("#close").click(function(){
$("#gingerbreadmeningredients").fadeOut();
});
$("#next").click(function(){
if ($("#leftside img:visible").next().length != 0)
$("#leftside img:visible").next().fadeIn().prev().hide();
else {
$("#leftside img:visible").hide();
$("#leftside img:first").fadeIn();
}
return false;
});
$("#prev").click(function(){
if ($("#leftside img:visible").prev().length != 0)
$("#leftside img:visible").prev().fadeIn().next().hide();
else {
$("#leftside img:visible").hide();
$("#leftside img:last").fadeIn();
}
return false;
});
});
</script>
</body></html>
体の代わりに頭部にJqueryを入れてみましたか？ – oompahlumpa
コンソールにはどのようなエラーがありますか？ – j08691