Question

（如何）我可以在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>

Answer 1

您无法在其他<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。

Answer 2

我很困惑，你希望整个事情成为一个链接？这可能需要几个步骤 - 没有一点点复制和粘贴无法处理 - 但为什么不只是手动为“list-group”的每个孩子提供一个'a'标签

在Twitter Bootstrap中的list-group-item类（本身是一个链接）中的链接

2 个答案: