(如何)我可以在 Twitter Bootstrap “list-group-item”中放置一个链接,该链接本身就是一个链接,而不会弄乱 list-group-item 格式吗? (见下文)
<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 使其可点击,方法如下:
HTML
- 使用带有自定义类和一些数据标签的 div 代替:
<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
- 让它看起来像一个链接:
.list-group-item-linkable:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
cursor: pointer;
}
JS
- 有趣的部分:
$(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 .
关于css - Twitter Bootstrap 中的列表组元素类(本身是一个链接)内的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19888431/