9

(方法) list-group-item 形式を台無しにすることなく、それ自体がリンクである Twitter ブートストラップ "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>
4

2 に答える 2

7

<a>タグを他のタグ内で使用することはできません<a>。これは無効な HTML です。この質問を確認してください。

ただし、次のようなハックを使用して、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も作成しました。

于 2015-01-23T12:39:36.853 に答える
0

私は混乱しています。全体をリンクにしたいですか？さらにいくつかの手順が必要になる場合があります-少しのコピーアンドペーストでは処理できません-しかし、「リストグループ」の各子に「a」タグを手動で提供しないのはなぜですか

于 2014-02-21T15:46:50.967 に答える