リンクが開かない（ブートストラップカルーセル微調整）

Question

I持って、私は「ニュースのスライダー」のように見えるように微調整してきた私のウェブサイトでのブートストラップカルーセル、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); 

タイトルのリンクをクリックすると、開いていないのです...

お手伝いできますか？

Answer 1

私は多くのことを知りませんが、あなたのJavaScriptをフィディルドからすべて削除しても、リンクは開かれません... 私は何かを無効にしていると思います。答えはあなたのJSライブラリ。私はすぐに追加することによって、リンクを有効にすることができたしかし

：

$('#slider h4').on('click', 'a', function(){ 
    window.open(this.href); 
    return false; 
})