jquery - 为什么我的所有 Bootstrap 4 轮播链接都不起作用?
问题描述
我正在更新我管理的网站以使用 Bootstrap 4。我希望在索引页面上有一个轮播,用于宣传即将发生的事件。我的事件在 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 之后的链接不起作用的指示将不胜感激。几个星期以来,我一直在摸不着头脑,这几乎是品牌重塑的最后一部分,所以我想让它发挥作用。
解决方案
推荐阅读
- excel - 在不更改单元格格式/验证的情况下从一张纸复制到另一张纸(不应删除下拉菜单)
- c# - .Net Core 模拟和代理
- linux - linux设备驱动文档
- arrays - bash脚本将字符串数组拆分为设计输出
- arrays - 如何选择数据框中价值最大的项目?在 Pyspark
- python-3.x - 使用 pandas 将日期时间附加到文件名的 csv 文件中
- python - 将列表列表中的所有列表相乘
- python - 如何使用 python 将 .mat 数据集转换为 hdf5?
- google-analytics - 谷歌分析无法访问页面级维度
- python - 在选择器期间从网页中选择标签内的所有值