谁能告诉我为什么当我点击导航菜单 btn 时我的 bootstrap carousel 消失了。
我想平滑滚动到同一页面上的 div... 任何人都可以解决这个奇怪的问题。
这是一个 fiddle ---------------- https://jsfiddle.net/vo1npqdx/502/
$(document).ready(function() {
// Add smooth scrolling to all links
$("#siteoverview_btn").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
$(".active").removeClass("active");
// Prevent default anchor click behavior
event.preventDefault();
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $("#siteoverview_content").offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
});
});
});<body>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- nav here -->
<nav class="navbar navbar-default roboto normal menu" role="navigation">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav nav_bar_block">
<li class="border_right"><a id="siteoverview_btn">SITE OVERVIEW</a></li>
</ul>
</div>
</nav>
<!-- nav here -->
<div class="banner">
<div class="notification_bar">
<div class="container">
<div class="content">
</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="main_body">
<div class="container">
<div class="body_content">
<h3 class="body_head">AUCTION CENTRE</h3>
<div class="row">
<div class="col-sm-8">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
<br>
<div class="row content_points">
<div class="col-sm-6">
<h4>LATEST NEWS</h4>
<hr class="underline">
<ul>
<li><b>LAST UPDATED ON: MARCH 17, 2017</b></li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Many desktop publishing packages and web page editors</li>
<li>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</li>
<li>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below</li>
<li>Many desktop publishing packages and web page editors</li>
</ul>
</div>
<div id="siteoverview_content" class="col-sm-6">
<h4>SITE OVERVIEW</h4>
<hr class="underline">
<ul>
<li>AWR Upload</li>
<li>AWR Report</li>
<li>Statistical Info</li>
<li>Gatepass Entry</li>
<li>Customised Reports</li>
<li>Other Info</li>
<li>Other Info 1</li>
<li>Other Info 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>最佳答案
$( ".active" ).removeClass( "active" );
使用此行，您将删除所有事件类，包括轮播元素事件类。因为 bootstrap 默认有 display:none;对于 .carousel-inner>.item 和 .carousel-inner>.active 类有显示 block 。所以这就是为什么当您删除事件类时，您的轮播元素会消失。因此，您可以删除该行或使用它。 Live on fiddle
$(".active").not('.item.active').removeClass("active");
关于javascript - 为什么单击菜单时我的轮播消失了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43160193/