Question

任何人都可以告诉我为什么当我点击导航菜单btn时我的自举旋转木马会消失..

我想在同一页面上平滑滚动到div ... 任何人都可以解决这个奇怪的问题。

这是一个小提琴--------------- documentation

$(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" );

使用此行删除所有活动类，包括轮播项活动类。因为默认情况下bootstrap有display：none;对于.carousel-inner＆gt; .item和.carousel-inner＆gt; .active类有显示块。这就是为什么当您删除活动类时，您的轮播项目会消失。因此，您可以删除该行或使用它。 Live on fiddle

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

Answer 2

只需删除$(".active").removeClass("active");内的$("#siteoverview_btn").on('click', function(event) {...})即可。这将删除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

对于使用Bootstrap 4的用户，这仍然是一种有效方法，但是您需要将.item替换为.carousel.item

替换

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

使用

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

或者，如果您正在使用其他使用.active类的代码，请根据需要替换。

为什么我的旋转木马在点击菜单时会消失？

3 个答案: