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。这是为什么？

回答

相关问题