Bootstrap Carousel不能正常工作並干擾其他jquery。這是爲什麼？

我一直在嘗試相當一段時間來弄清楚如何插入一個沒有運氣的引導傳送帶。我不知道這是如何插入腳本的BC。我下載了bootstrap並將其放入我的文件夾中。我在視頻和在線教程之後跟蹤視頻，但沒有運氣。現在我已經看到，腳本干擾了我的導航，當你將鼠標懸停在單詞上時，出現的下拉信息現在是分開的，當它們以前是直接在單詞的下面時，沒有填充或空白。我只是希望在導航下面有一個傳送帶，同時仍然允許導航使用我已經放置的js進行懸停時下載信息。Bootstrap Carousel不能正常工作並干擾其他jquery。這是爲什麼？

這是我的代碼。有人可以幫助我瞭解哪裏出了問題，以及如何解決它？

我的HTML是：

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Gender Identity 2</title> 



     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 

</head> 
<div class="container"> 
<header> 
    <img class="banner" src="images/banner.png"> 
    <div class="gender"> 
    <h3> Gender Identity </h3> 
    </div> 
</header> 

<div id="wrap"> 

<div id="tabwrap"> 
    <ul id="tabs"> 
    <li > 
    <a href="#bacon" class="cyan">Terms</a> 
    </li> 

    <li> 
    <a href="#batfish" class="green">Resources</a> 
    </li> 

    <li> 
    <a href="#tuna" class="lav">Culture</a> 
    </li> 

    <li> 
     <a href="#sausage" class="teal">Share</a> 
    </li> 

    </ul> 

    <div id="content"> 
    <div id="bacon" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div> 
    <div id="batfish" class="animated"><p>Batfish warmouth orbicular combtooth blenny; madtom, knifefish handfish rock beauty armorhead frogfish. Cownose ray pupfish pencilfish char fangtooth marblefish longfin dragonfish armored searobin hamlet.</p></div> 
    <div id="tuna" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div> 
    <div id="sausage" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p> 
    </div> <!-- End of Div--> 
    </div> <!-- End of Div--> 
    </div><!-- End of Div--> 

<!-- Carousel Code Start --> 

<div id = "myCarousel" class = "carousel"> 

<ol class = "carousel-indicators"> 
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li> 
<li data-target = "#myCarousel" data-slide-to = "1"></li> 
<li data-target = "#myCarousel" data-slide-to = "2"></li> 
</ol> 

<div class = "carousel-inner"> 

<div class = "item active"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 


<div class = "item"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 


<div class = "item"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 

</div> 

</div> 

<!-- <div class="main-caro"> 
    <img src="http://placehold.it/1250x660"> 

    </div> <!-- End of Div--> --> 

<!-- Carousel Code End --> 

</div> <!-- End of last Div--> 

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 
    <script src="js/index.js"></script> 

<!-- Bootstrap --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 


</body> 
</html>

我的CSS是：

@font-face { font-family: "aqua"; 
    src: url('aqua.ttf'); } 
@font-face { font-family: "axis"; 
    src: url('Axis Extrabold.otf'); } 
@font-face { font-family: "atami"; 
    src: url('Atami-Regular.otf'); } 



.container { 
    width: 100%; 
    margin: 0 auto; 
} 

.banner{ 
    display: block; 
margin: 0 auto; 
    width: 100%; 
    min-width: 400px; 
} 

.gender { 
    padding-top: 20px; 
    padding-bottom: 20px; 
/* background-color: black; */ 
    margin-bottom: 20px; 
} 
.gender h3{ 
text-align: center; 
color: rgb(0,0,0); /* white*/ 
    animation: rgb infinite alternate; 
    animation-duration: 15s; 
    font-size: 2em; 
} 

@keyframes rgb { 
    /* 0% will fallback to the default background-color of #rgb*/ 
50% {color: rgb(29,185,226); /*blue*/ } 
    75% {color: rgb(105,45,138); /*purple*/ } 
    100% {color: rgb(237,49,147); /*pink*/} 
} 

h3{ 
font-family: "axis", sans-serif; 
} 

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } 

#wrap { width: 75%; margin: 0 auto; min-width: 300px; max-width: 1400px; } 

#tabwrap { 
    background: #fff; 
    overflow: hidden; 
    width: 100%; 
    min-height: 300px; 
    margin: 0 auto; 
    /*box-shadow: 0 0 20px #ddd;*/ 
    /*border: 1px solid #ddd;*/ 
} 
#tabs { overflow: hidden; } 
#tabs li { list-style: none; 
      font-family: "axis", sans-serif; } 

#tabs li a { 
    float: left; 
    display: block; 
    padding: 10px; 
    color: black; 
    width: 25%; 
    text-decoration: none; 
    text-align: center; 
    /*border-right: 1px solid #555; 
    border-left: 1px solid #888;*/ 
    font-size: 15px; 

} 

#tabs li a:hover { background: #666; } 
#tabs li:first-child a { border-left: 0; } 
#tabs li:last-child a { border-right: 0; } 

#tabs li.current a { 
    background: #fff; 
    color: #666; 

} 

#tabs li.current a.cyan{ 
    background: rgb(245,166,200); /*pink*/ 
    color: white; 
} 

#tabs li.current a.green{ 
background-color: rgb(164,206,249); /*blue*/ 
    color: white; 
} 

#tabs li.current a.lav{ 
background-color: rgb(200,200,255); 
    color: white; 
} 


#tabs li.current a.teal{ 
background-color: rgb(163,109,174); 
    color: white; 
} 



#content > div { 
    clear: both; 
    padding: 20px; 
    line-height: 19px; 
    color: white; 
    display: none; 
font-family: "axis", sans-serif; 

} 
.animated { 
    -webkit-animation-duration: 1s; 
     -moz-animation-duration: 1s; 
     -o-animation-duration: 1s; 
      animation-duration: 2s; 
} 

#content .current { display: block } 
#content p { margin: 0 0 20px 0;} 

@-webkit-keyframes fadeInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-10px); 
    transform: translateX(-10px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

@keyframes fadeInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-10px); 
    -ms-transform: translateX(-10px); 
    transform: translateX(-10px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

.fadeInLeft { 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
} 

#bacon { 
    background-color: rgb(245,166,200); /*pink*/ 
} 

#batfish { 
    background-color: rgb(164,206,249); /*blue*/ 
} 

#tuna { 
    background-color: rgb(200,200,255); 
} 

#sausage { 
    background-color: rgb(163,109,174); 
    z-index: 1; 
} 

.main-caro img{ 
    display:block; 
    width: 100%; 
    margin: 0 auto; 
    margin-top: -215px; 
padding-top: 20px; 
    padding-bottom: 20px; 
    z-index:-1; 
}

，我的JS是：

$('#tabs li a').hover(function(e) { 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); 
    $(this).parent().addClass('current'); 
    var currentTab = $(this).attr('href'); 
    $(currentTab).addClass('current fadeInLeft'); 
    e.preventDefault(); 

}, function(){ 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); 
});

再次，我已經下載的自舉並將其插入到我的主文件夾作爲自己的文件夾命名爲bootstrap，然後找到css文件夾和js文件夾。

感謝您給予的任何幫助！

來源

2016-12-03 Lubidia13

的理由讓你將鼠標懸停在菜單鏈接，出現的提示框之間的間隔距離bootstrap.min.css

ol, ul { 
    margin-bottom: 10px; 
    margin-top: 0px; 
}

樣式規則，讓您的標籤UL有0px margin bottom將此添加到您的style.css中：

ul#tabs { 
    margin-bottom: 0px; 
}

我不確定輪播爲什麼不適合您。這個對我有用。也許它工作，但因爲所有的圖像是相同的，它看起來不像？

這裏是一個plunker與額外的空間問題修復。

EDIT（添加解決方案爲輪轉的問題）：

變化

<div id="myCarousel" class="carousel">

到

<div id="myCarousel" class="carousel slide">

，如果你想轉盤循環自動您需要添加

$(function() { 
    $('.carousel').carousel(); 
});

到您的JavaScript。

來源

2016-12-03 04:42:25

感謝您對nav的幫助！我非常感激。另一個問題：自舉CSS是否也導致傳送帶距離導航很遠？兩者之間似乎有很大的填充量。我希望nav直接位於滑塊上方，它們之間可能有40像素的空間。如果這有道理？ – Lubidia13

nav和carousel之間的額外空間來自您的一個自定義樣式規則：#tabwrap {min-height：300px; }所以只需刪除最小高度並添加padding-bottom：40px; –

而在您提出要求之前，爲了讓懸停框出現在轉盤頂部而不是將其推下，請添加樣式規則：#content {position：absolute; z-index：1; } –

你有沒有嘗試添加noConflict到最後加載的jQuery庫？我有一個類似的問題，我的傳送帶單獨工作，但只要我將它添加到已經使用了jQuery庫的頁面，結果證明這些庫沒有良好的網格。

您的代碼正在加載兩個jQuery庫。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

然後

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

我打賭它需要一個noConflict增加。

jQuery.noConflict()

來源

2016-12-03 04:36:02 godfathr

Bootstrap Carousel不能正常工作並干擾其他jquery。這是爲什麼？

回答

相關問題