为什么我的所有Bootstrap 4轮播链接都无法正常工作?

时间:2019-01-28 20:31:46

标签: jquery html bootstrap-4

我正在更新自己管理的网站以使用Bootstrap4。我希望索引页面上有一个轮播广告来宣传即将发生的事件。我的事件在JSON文件中定义,并且HTML是通过读取该JSON的各种PHP例程构造的。因此,轮播中的所有项目都是相同的。

最初显示3个事件,使用轮播控件时,可以再显示3个事件。

表面上,一切都正常运行-控件,滚动到下一个或上一个3块,依此类推。问题是链接。单击前5个事件中的任何一个的“查看详细信息”按钮,将带您进入第二页,并按预期显示该事件的详细信息。但是单击事件6以后的按钮会将您带到辅助页面的最后一个事件。转盘引用的所有链接都位于第二页上。

以下内容显示在页面的HEAD部分

<link rel='stylesheet' href='css/bootstrap.min.css'> 
<link rel='stylesheet' type='text/css' href='css/indexCarousel.css' />

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> 
<script src='scripts/bootstrap.min.js'></script> 
<script type='text/javascript' src='scripts/bjqs-1.3.min.js' ></script>

以下是生成的页面正文的页面来源(为简便起见,我省略了事件4-9-我确定您可以弄清楚它的外观):

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-10 col-center m-auto'>
      <div id='myCarousel' class='carousel slide' data-ride='carousel' data-interval='0'>
        <div class='carousel-inner'>
          <div class='item carousel-item active'>
            <div class='row'>
              <div class='col-sm-4'>
                <div class='thumb-wrapper'>
                  <div class='img-box'>
                    <img src='images/photo1.jpg' class='img-responsive img-fluid' alt=''>
                  </div>
                  <div class='thumb-content'>
                    <h4>Description of photo1</h4>
                    <p>some other text</p>
                    <a href='secondpage.php#link1' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
                  </div>
                </div>
              </div>
              <div class='col-sm-4'>
                <div class='thumb-wrapper'>
                  <div class='img-box'>
                    <img src='images/photo2.jpg' class='img-responsive img-fluid' alt=''>
                  </div>
                  <div class='thumb-content'>
                    <h4>Description of photo2</h4>
                    <p>some other text</p>
                    <a href='secondpage.php#link2' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
                  </div>
                </div>
              </div>
              <div class='col-sm-4'>
                <div class='thumb-wrapper'>
                  <div class='img-box'>
                    <img src='images/photo3.jpg' class='img-responsive img-fluid' alt=''>
                  </div>
                  <div class='thumb-content'>
                    <h4>Description of photo3</h4>
                    <p>some other text</p>
                    <a href='secondpage.php#link3' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
                  </div>
                </div>
              </div>
            </div>  <!-- end of row -->
          </div>  <!-- end of carousel-item -->

          <div class='item carousel-item'>
            <div class='row'>
              ...
              <div class='col-sm-4'>
                <div class='thumb-wrapper'>
                  <div class='img-box'>
                    <img src='images/photo10.jpg' class='img-responsive img-fluid' alt=''>
                  </div>
                  <div class='thumb-content'>
                    <h4>Description of photo10</h4>
                    <p>some other text</p>
                    <a href='secondpage.php#link10' class='btn btn-primary'>See details<i class='fa fa-angle-right'></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class='carousel-control left carousel-control-prev' href='#myCarousel' data-slide='prev'><i class='fa fa-angle-left'></i></a>
        <a class='carousel-control right carousel-control-next' href='#myCarousel' data-slide='next'><i class='fa fa-angle-right'></i></a>
      </div>
    </div>
  </div> <!-- end of row -->
</div>  <!-- end of container -->

我们将不胜感激地收到任何有关为什么6号及以上链接无效的指示。我已经挠头了几周,这几乎是重新品牌化的最后一部分,所以我想让它正常工作。

0 个答案:

没有答案