为什么单击菜单时我的轮播消失了？

Question

can anybody tell me why my bootstrap carousel disappear when i click on nav menu btn.. 谁能告诉我为什么我单击导航菜单btn时我的引导轮播消失了。

I want to smooth scroll to div on same page... Can any body sole this weird problem. 我想在同一页面上平滑滚动到div ...任何人都可以独享这个奇怪的问题。

here is a fiddle--------------- https://jsfiddle.net/vo1npqdx/502/ 这是一个小提琴----------------- 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>

Answer 1

$( ".active" ).removeClass( "active" );

using this line you are remove all the active class including carousel item active class. 使用此行，您将删除所有活动类别，包括轮播项目活动类别。 Because bootstrap by default has display:none; 由于引导程序默认情况下具有display：none; for .carousel-inner>.item and .carousel-inner>.active class has display block. .carousel-inner> .item和.carousel-inner> .active类具有显示块。 So that's why when you remove active class, your carousel item disappear. 这就是为什么当您删除活动课堂时，您的轮播项目会消失的原因。 So either you can remove that line or use this. 因此，您可以删除该行或使用它。 Live on fiddle 活在小提琴里

$(".active").not('.item.active').removeClass("active");

Answer 2

Just remove $(".active").removeClass("active"); 只需删除$(".active").removeClass("active"); inside $("#siteoverview_btn").on('click', function(event) {...}) . 在$("#siteoverview_btn").on('click', function(event) {...}) 。 this remove the active class of bootstrap carousel and error comes 这将删除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>

Answer 3

For those that are using Bootstrap 4, this is still a valid method, however you need to substitute .item with .carousel.item 对于使用Bootstrap 4的用户，这仍然是有效的方法，但是您需要将.item替换为.carousel.item

Replace 更换

$( ".active" ).removeClass( "active" );

With 用

$('.active').not('.carousel-item.active').removeClass('active');

Or, if you are using any other code that uses the .active class, substitute as required. 或者，如果您正在使用其他使用.active类的代码，请根据需要替换。

为什么单击菜单时我的轮播消失了？

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-04-01 18:39:00

解决方案2
0 2017-04-01 18:35:02

解决方案3
0 2019-03-23 21:00:32

为什么单击菜单时我的轮播消失了？

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-04-01 18:39:00

解决方案2 0 2017-04-01 18:35:02

解决方案3 0 2019-03-23 21:00:32

解决方案1
1 已采纳 2017-04-01 18:39:00

解决方案2
0 2017-04-01 18:35:02

解决方案3
0 2019-03-23 21:00:32