總結鏈接<a>周圍</a> <div>

Question

是否可以在<div>周圍包裹<a>標記，如下所示：

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video description</div>
        </div>
    </div>
</a>

Eclipse告訴我div的位置不正確？ 如果不允許這樣做。 如何使整個“布局”課程成為一個鏈接？

Answer 1

該結構在HTML5中將是有效的，因為在HTML5中錨點可以包裝幾乎所有元素，除了其他錨點和表單控件。 如今，大多數瀏覽器都對此提供支持，並將問題中的代碼解析為有效的HTML。 以下答案寫於2011年，如果您支持舊版瀏覽器（*咳嗽* Internet Explorer *咳嗽*），該答案可能會很有用。

---

沒有HTML5解析器的較舊的瀏覽器（例如Firefox 3.6）仍會對此感到困惑，並且可能會弄亂DOM結構。

HTML4的三個選項-使用所有內聯元素：

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

然后display: block樣式display: block

---

使用JavaScript和:hover ：

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

和（假設jQuery）

$('.layout').click(function(){
    // Do something
}):

和

.layout:hover {
    // Hover effect
}

---

或者最后使用絕對定位來放置帶有CSS a錨，以覆蓋整個.layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

和CSS：

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

當然，這不適用於舊版本的IE。

Answer 2

雖然<a>標記不允許包含<div>元素，但它可以包含其他內聯元素，例如<span> 。

遇到問題時，我用<span>交換了div標簽。 由於span標簽是一個內聯元素，因此需要將display:block應用於<span>元素的css，以使其表現得像<div> block元素。 這應該是有效的xhtml，不需要任何JavaScript。

這是一個例子：

<a href="#">
    <span style="display:block">
        Some content. Maybe some other span elements, or images.
    </span>
</a>

Answer 3

另一個簡單的解決方案-只需向div中添加一個onclick事件處理程序即可：

<div class="layout" onclick="location.href='somewhere'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

這對我來說很棒，但是有一個小陷阱。 我不確定這對搜索引擎的友好程度。 我擔心Google的網絡爬蟲可能找不到此鏈接，因此我也傾向於在塊中的某個地方包括傳統的A HREF鏈接，如下所示：

<div class="layout" onclick="location.href='destination_url'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a href="destination_url">This is a link</a>
</div>

Answer 4

蒂莫西（Timothy）的解決方案是正確的...而不是在div周圍包裹錨點...您只需使用display：block為錨點元素提供布局，並添加錨點的大小和寬度...

.div_class   { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }

<div class='div_class'><a href="#"></a></div> 

Answer 5

我曾試圖創建使用jQuery定制的解決方案 ，作為會模仿相同的行為， a標簽呢，父DIV。

演示： https : //jsfiddle.net/kutec/m9vxhcke/

根據W3C標准，您不能執行以下操作：

<div class="boxes">
    <a href="http://link1.com" target="_blank">
        <div class="box">
            <h3>Link with _blank attr</h3>
        </div>
    </a>
</div>

您必須遵循以下步驟：

<div class="boxes">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

但是通過遵循上面的代碼，您將不會獲得整個DIV可點擊的:)。

正確的結構應該是這樣的，它還允許您單擊DIV來重定向給定的href值 ：

<div class="boxes" data-href="http://link1.com" data-target="_blank">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

簡單的解決方案 ：

$(function() {  
    $('.boxes a').each(function(){
        var aTag = $(this).attr('href');

        $(this).parent().attr('data-href',aTag);        

        $("[data-href]").click(function() {
            window.location.href = $(this).attr("data-href");
            return false;
        });
    })  
}(jQuery));

動態解決方案 ：

(function ( $ ) { 
    $.fn.dataURL = function() {

        // variables
        var el = $(this);
        var aTag = el.find('a');
        var aHref;
        var aTarget;

        // get & set attributes
        aTag.each(function() {
            var aHref = $(this).attr('href');
            $(this).parent().attr('data-href',this);

            aTarget = $(this).attr('target');
            $(this).parent().attr('data-target',aTarget);
        });

        // imitation - default attributes' behavior on "data-" attributes
        $(el).delegate('[data-href]','click', function() {
            var loc = window.location.href;
            loc = $(this).attr("data-href");
            aTarget = $(this).attr('data-target');

            if(aTarget == "_blank"){
                window.open(loc);
            } else {
                window.location = loc;
            }

            return false;
        });     

        //removing attributes from selector itself
        el.removeAttr('data-href');
        el.removeAttr('data-target');

        // css
        $('[data-href]').css('cursor','pointer');
    };
}( jQuery ));

最終通話 ：

<script>
    $('.boxes').dataURL();
</script>

希望這會有所幫助:)

Answer 6

您只想將“ a”標記設置為display: block;樣式即可display: block;

Eclipse適當地告訴您HTML不符合規范（錨標記中不允許div標簽）。

但是，由於您似乎想在視覺上使錨點看起來像個大盒子，因此只需對它進行樣式設置即可：)