谁能告诉我为什么当我点击导航菜单时我的引导轮播消失了。
我想在同一页面上平滑滚动到div...任何身体都能解决这个奇怪的问题。
这是一个小提琴---------------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" );
使用此行，您可以删除所有活动类，包括轮播项目活动类。因为默认情况下引导程序具有显示：无;对于 .carousel-inner>.item 和 .carousel-inner>.active 类具有显示块。因此，当您移除有效课程时，轮播内容会消失。因此，您可以删除该行或使用它。活在小提琴上
$(".active").not('.item.active').removeClass("active");
只需删除$("#siteoverview_btn").on('click', function(event) {...})内部的$(".active").removeClass("active");即可。 这删除了引导轮播的active类，并且出现了错误
$(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>对于那些使用 Bootstrap 4 的用户，这仍然是一个有效的方法，但是您需要将 .item 替换为 .carousel.item
取代
$( ".active" ).removeClass( "active" );
跟
$('.active').not('.carousel-item.active').removeClass('active');
或者，如果您使用的是使用 .active 类的任何其他代码，请根据需要进行替换。