(如何)我可以在twitter bootstrap“list-group-item”中放置一个链接,它本身就是一个链接,而不会搞乱list-group-item格式？ (见下文)
@H_502_2@<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.PHP?u=http" target="_blank">
Share on Facebook
</a>
</a>
</div>
解决方法
你不能使用< a>其他< a>内的标签标签,这是无效的HTML.检查
this问题.
你可以使用jQuery使其可点击,但是这样的hack：
@H_502_2@<div class="list-group"> <div class="list-group-item active list-group-item-linkable" data-link="http://www.google.com"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> <a href="https://www.facebook.com/sharer/sharer.PHP?u=http" target="_blank"> Share on Facebook </a> </div> </div>CSS – 使它看起来像一个链接：
@H_502_2@.list-group-item-linkable:hover { color: #555; text-decoration: none; background-color: #f5f5f5; cursor: pointer; }JS – 有趣的部分：
@H_502_2@$(document).ready(function() { $('.list-group-item-linkable').on('click',function() { // same window/tab: window.location.href = $(this).data('link'); // new window/tab: //window.open($(this).data('link')); }); $('.list-group-item-linkable a,.list-group-item-linkable button') .on('click',function(e) { e.stopPropagation(); }); });我还创建了一个JSFiddle.
