我的网站上有一个 Bootstrap 轮播,我已将其调整为看起来像“新闻 slider ”,see demo here :
HTML:
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://lorempixel.com/800/400">
</div>
<div class="item">
<img class="img-responsive" src="http://lorempixel.com/800/400">
</div>
<div class="item">
<img class="img-responsive" src="http://lorempixel.com/800/400">
</div>
</div>
<ul class="list-group col-sm-4">
<li data-target="#slider" data-slide-to="0" class="list-group-item active">
<h4 class="text-uppercase"><a href="http://www.google.fr">Link 1</a><br><small>Google FR</small></h4></li>
<li data-target="#slider" data-slide-to="1" class="list-group-item">
<h4 class="text-uppercase"><a href="http://www.google.de">Link 2</a><br><small>Google DE</small></h4></li>
<li data-target="#slider" data-slide-to="2" class="list-group-item">
<h4 class="text-uppercase"><a href="http://www.google.co.uk">Link 3</a><br><small>Google UK</small></h4></li>
</ul>
</div>
CSS:
#slider .list-group {
position: absolute;
top: 0;
right: 0;
padding-right: 0;
}
#slider .list-group-item {
border-radius: 0;
cursor: pointer;
position: relative;
display: block;
padding: 8px 15px;
margin-bottom: 0;
background-color: #000;
border: none;
border-bottom: 1px solid #fff;
overflow: hidden;
vertical-align: middle;
}
#slider .list-group-item h4 {
font-size: 20px;
margin-top: 0;
}
#slider .list-group-item small {
font-family: 'Open Sans Condensed', sans-serif;
}
#slider .list-group-item.active,
#slider .list-group-item.active:focus,
#slider .list-group-item.active:hover {
background-color: #C52026;
border-bottom: 1px solid #fff;
}
#slider .list-group-item:last-child {
border-bottom: none;
}
#slider .list-group-item.active a,
#slider .list-group-item.active:focus a,
#slider .list-group-item.active:hover a {
color: #fff;
}
#slider .list-group-item.active small,
#slider .list-group-item.active:focus small,
#slider .list-group-item.active:hover small {
color: #bbb;
}
#slider .carousel-caption {
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, 0.7);
text-shadow: none;
}
#slider .carousel-caption h2 {
margin: 0;
}
#slider .carousel-caption h2 small {
font-family: 'Open Sans Condensed', sans-serif;
color: #333;
}
JS:
var clickEvent = false;
var slider = $('#slider');
slider.carousel({
interval: 3000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function() {
if (!clickEvent) {
var count = $('.list-group').children().length - 1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if (count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
var slider = $('#slider');
var boxheight = slider.find('.carousel-inner').innerHeight();
var itemlength = slider.find('.item').length;
var triggerheight = boxheight / itemlength;
slider.find('.list-group-item').outerHeight(triggerheight);
问题是,当我点击标题上的链接时,它们打不开...
你能帮忙吗?
最佳答案
我知道的不多,但即使从 fiddle 中删除所有 JavaScript,链接也打不开... 我猜有些东西正在禁用它们,答案可能就在您的 JS 库的文档中。
但是我能够通过添加快速启用链接:
$('#slider h4').on('click', 'a', function(){
window.open(this.href);
return false;
})
关于javascript - 列表组中的链接在触发时不打开(Bootstrap 轮播调整),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39020764/