jQuery代碼將無法與引導

-1

我的jQuery代碼將無法使用Bootstrap。只要我拿出bootstrap.css的鏈接，jQuery就可以工作。我真的不熟悉Bootstrap，但我必須將它用於項目。我如何讓簡單的jQuery與Bootstrap一起使用？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>

來源

2016-12-03 Madison

你有沒有試過在頭部而不是身體上包括Jquery？ – oompahlumpa

你在控制檯遇到什麼錯誤？ – j08691

我想通過你的HTML jQuery的鏈接，你正在使用jQuery 3.如果我錯了，然後讓我知道。 Bootstrap需要jquery版本1.9或更高版本並低於jquery 3.所以請嘗試使用1.9到3之間的jquery版本，我認爲它應該可以工作。

去替代

<script src="jquery-3.js"></script>

與

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

，看看是否可行。

來源

2016-12-03 06:29:10

jQuery代碼將無法與引導

回答

相關問題