jQuery-Code funktioniert nicht mit Bootstrap

-1

Mein jQuery-Code wird nicht mit Bootstrap funktionieren. Sobald ich den Link zur bootstrap.css entscheide, funktioniert jQuery. Bootstrap kenne ich nicht wirklich, aber ich muss es für ein Projekt verwenden. Wie kann ich meine einfache jQuery mit Bootstrap arbeiten?jQuery-Code funktioniert nicht mit Bootstrap

<!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>

Quelle

2016-12-03 Madison

Haben Sie versucht, die Jquery in den Kopf anstelle des Körpers zu integrieren? – oompahlumpa

Welche Fehler bekommen Sie in der Konsole? – j08691

ich durch den Link in Ihrem html jquery übernehmen, die Sie jquery verwenden 3. Wenn ich falsch bin, dann lass es mich wissen. Bootstrap benötigt jquery Version 1.9 oder höher und niedriger als jquery 3. Versuchen Sie also eine Version von jquery zwischen 1.9 und 3 zu verwenden und ich denke, es sollte funktionieren.

Versuch und ersetzen

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

mit

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

und sehen, ob das funktioniert.

Quelle

2016-12-03 06:29:10

jQuery-Code funktioniert nicht mit Bootstrap

Antwort

Verwandte Themen