Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/464.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 引导4下拉菜单&;转盘不工作_Javascript_Twitter Bootstrap_Bootstrap 4_Carousel - Fatal编程技术网

Javascript 引导4下拉菜单&;转盘不工作

Javascript 引导4下拉菜单&;转盘不工作,javascript,twitter-bootstrap,bootstrap-4,carousel,Javascript,Twitter Bootstrap,Bootstrap 4,Carousel,我刚开始使用Bootstrap4,我正在一个网站上实现旋转木马和下拉菜单。但是,每当我点击下拉菜单或旋转木马指示器时,这两种方法似乎都不起作用。它会在URL中添加id,并再次进入页面顶部。下面是代码 <div class="col-md-6"> <!-- http://w3widgets.com/responsive-slider/img/slide-2.jpg --> <div id="carouselExampleControls" cl

我刚开始使用Bootstrap4,我正在一个网站上实现旋转木马和下拉菜单。但是,每当我点击下拉菜单或旋转木马指示器时,这两种方法似乎都不起作用。它会在URL中添加id,并再次进入页面顶部。下面是代码

    <div class="col-md-6">
    <!-- http://w3widgets.com/responsive-slider/img/slide-2.jpg -->
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="First slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>...</h5>
            <p>...</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Second slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>...</h5>
            <p>...</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Third slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>...</h5>
            <p>...</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>

  • ...

    ...

    ...

    我已经包括了所有必需的
    CSS(bootstrap.min.CSS)
    JS(jQuery,Popper,bootstrap.min.JS)


    我不知道有什么问题。它甚至没有在控制台中显示任何类型的错误或警告。

    验证所有链接是否正确链接,以及您是否指向确切的文件位置或使用
    CDN

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md-6">
            <!-- http://w3widgets.com/responsive-slider/img/slide-2.jpg -->
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="First slide">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Second slide">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Third slide">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
    
    
    
  • ...

    ...

    ...


    我认为
    data target=“#carouselExampleIndicators”
    会将您带到页面顶部,尝试删除它。如果
    URL
    中添加了
    id
    ,则
    bootstrap.min.js
    链接不正确,你能把节目安排得满满的吗code@Saheb还是一样error@sanojlawrence你是对的,有一个链接错误,请将此作为答案发布,我会标记:)