锚标签打破了旋转木马滑块-Bootstrap 4
[英]Anchor tags are breaking carousel slider - Bootstrap 4
问题描述
Hoping someone can help me here. 
希望有人可以在这里帮助我。
Messing around with Bootstrap 4 carousel, and I've found that if the content of the slide has an anchor tag in there somewhere, the carousel simply will not go to that slide. 与Bootstrap 4传送带混为一谈，我发现，如果幻灯片的内容在某处有锚标记，则该旋转带不会进入该幻灯片。 I would like to keep the design of having a button to link to other parts of the site on the slide, but i don't know how to implement it if the carousel won't slide to it. 我想保留一个按钮链接到幻灯片上站点其他部分的设计，但是如果轮播不会滑动到该按钮，我不知道如何实现。
I did extensive troubleshooting, and it's definitely the a tag causing this, as the same code minus the anchor tag around the button works perfectly fine. 我进行了广泛的故障排除，这肯定是导致此问题的标签，因为相同的代码减去按钮周围的定位标签效果很好。
Thanks for the help. 谢谢您的帮助。
Code is as follows: 代码如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
2 个解决方案
解决方案1
0 2018-08-13 11:36:41
I change the code, 我更改代码，
obviously you can add anchor tag in bootstarp slider i just remove button and add class in anchor tag and then done. 显然，您可以在bootstarp滑块中添加锚标记，我只需删除按钮并在锚标记中添加类，然后完成即可。
- You miss to close anchor tag. 您错过了关闭锚标签的操作。
- never use a button as a child of anchor tag 永远不要将按钮用作锚标记的子代
Code is as follows: 代码如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
解决方案2
0 2018-08-13 12:22:45
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <title>SW Events - Tasting Menus</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <div class="container" id="tastingCar"> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Whisky Tastings</h3> <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br> Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> <div class="menuBook align-items-center"> <!-- Anchor tag won't allow carousel to slide --> <a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a> </div> </div> </div> <div class="carousel-item"> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Gin Tastings</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p> </div> </div> <div class="carousel-item text-left "> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Private Tastings</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p> </div> </div> <div class="carousel-item text-left "> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Whisky Tastings</h3> <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br> Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> <div class="menuBook align-items-center"> <!-- Anchor tag won't allow carousel to slide --> <a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a> </div> </div> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tastingTitle").fadeIn(750, function() { $("#tastingCar").fadeIn(1000, function() { $("#weddingSub").fadeIn(1250); }); }); }); var myFunc = $(document).ready(function(){ $("#bookWedding").click(function () { $("#chateauLogo").fadeOut(500); $("#weddingSub").fadeOut(500); $("#inAssoc").fadeOut(500); $("#bookWedding").fadeOut(500, function () { $("#weddingForm").fadeIn(500); }); }); }); $(function () { $( "#datepicker" ).datepicker(); } ); $('.carousel').carousel({ interval: false }); </script> </div> </body>
try this 尝试这个
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
引导轮播会阻止锚标签工作 - Bootstrap carousel prevents anchor tags to work
锚<a>标签在滑块中不起作用</a> - Anchor <a> tags are not working in slider
Bootstrap 滑块/轮播 - Bootstrap slider/carousel
Bootstrap轮播段落滑块 - Bootstrap Carousel Paragraph Slider
带有文本的自举轮播滑块 - bootstrap carousel slider with text
可滚动的引导轮/滑块 - Scrollable Bootstrap Carousel/Slider
Bootstrap 4 2列转盘 slider - Bootstrap 4 2 column carousel slider
Bootstrap Carousel Slider不起作用 - Bootstrap Carousel Slider not working
Bootstrap 5: slider / 轮播产品 - Bootstrap 5: slider / carousel products
锚标签在jquery滑块中不起作用 - Anchor tags not working in jquery slider
相关标签