换行链接<a> around <div></div></a>

时间：2011-03-16 02:31:04

标签： javascript html

是否可以将<a>标记包裹在<div>周围，如下所示：

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

Eclipse告诉我div是在错误的地方？ 如果不允许这样做。如何让整个“布局”类成为链接？

8 个答案:

答案 0 :(得分：73)

该结构在HTML5中有效，因为在HTML5锚点中几乎可以包装除了其他锚点和表单控件之外的任何元素。现在大多数浏览器都支持此功能，并将问题中的代码解析为有效的HTML。以下答案写于2011年，如果您支持旧浏览器（* cough * Internet Explorer * cough *），可能会有用。

没有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

进行样式设置

使用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。

答案 1 :(得分：14)

虽然<a>标记不允许包含<div>元素，但允许包含其他内联元素，例如<span>。

当我遇到问题时，我将div标签与<span>交换。由于span标记是内联元素，因此您需要将display:block应用于<span>元素的css，以使其行为类似于<div>块元素。 这应该是有效的xhtml，不需要任何javascript。

以下是一个例子：

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

答案 2 :(得分：7)

另一个简单的解决方案 - 只需在div中添加一个onclick事件处理程序：

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

这对我很有用，但有一个小问题。我不确定搜索引擎是多么友好。我担心谷歌的网络抓取工具可能找不到这个链接所以我也倾向于在块中的某个地方包含传统的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>

答案 3 :(得分：6)

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>

答案 4 :(得分：0)

您只想将“a”标记设置为display: block;

Eclipse正在告诉您HTML不符合规范（因为锚标记中不允许使用div标记）。

但是，既然你似乎希望在视觉上使锚点看起来像一个大盒子，那么只需将它设计为：）

答案 5 :(得分：0)

我曾尝试创建custom solution using 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>

希望这会有所帮助：）

答案 6 :(得分：0)

使div成为链接/可点击的一种简单方法是使用html javascript onclick属性：

CREATE TABLE
INSERT 0 4
 col1 |    col2     |                           col3                           |      col4       |  col5  
------+-------------+----------------------------------------------------------+-----------------+--------
    1 | NCT02582996 | acetaminophen+caffeine+dihydroergotamine+metoclopramide. | metoclopramide. | 204756
    1 | NCT02582996 | acetaminophen+caffeine+dihydroergotamine+metoclopramide. | metoclopramide. |       
    3 | NCT02582997 | acetaminophen                                            | metoclopramide. | 204758
    4 | NCT02582998 | ibuprufin                                                |                 |       
(4 rows)

 col1 |    col2     |                           col3                           |      col4       |  col5  
------+-------------+----------------------------------------------------------+-----------------+--------
    1 | NCT02582996 | acetaminophen+caffeine+dihydroergotamine+metoclopramide. | metoclopramide. | 204756
    3 | NCT02582997 | acetaminophen                                            | metoclopramide. | 204758
    4 | NCT02582998 | ibuprufin                                                |                 |       
(3 rows)

答案 7 :(得分：0)

HTML提供了两个常规元素，其中div是 natural 块元素，而span是 natural 内联元素。所有其他元素也类似地分配为 natural 块或内联。

现在，尽管两者都可以由CSS display制成inline，inline-block或block中的任何一个，但出于封装目的，它们仍被视为它们的自然，因此出现警告消息。豹子和斑点之类的东西。

但是，css仅用于制作元素看起来的（表示形式），而不是实际上 be 的（功能性）外观，因此它不是改变元素的基本性质，尽管在实践中会变得很模糊。由span制造的block变成了恶霸，将其他所有东西都踢开了，这是非常不符合inline的行为。

因此，为了减轻其自然与CSS引发的行为之间可能存在的冲突，最好允许：

  • div或任何 natural 块标记只能是block或inline-block。
  • span或任何 natural 内联标签只能是inline或inline-block。

这也将减轻倾向于建立页面结构的可能性，而页面结构最终可能会抛出错误和警告消息。

基本上，从不在任何深度将 natural 块标签嵌入 natural 内联标签内。

为什么会有真正的区别，也许是因为人们对HTML最初被梦想成什么样时使用的想法太简单了。

当然，框架制造商通过在各处使用无数div来解决了许多这些如何嵌入的问题，并且“ divitis”诞生了，并且在每个框架中都还活得很好。只需在几乎所有商业网页上的浏览器中按F12，然后向下钻十二个div。此页面上有15个div连续级别。

这意味着他们实际上只需要针对每个目的管理一个标签，并将其视为隔离的环境来进行管理。因此，本来是偶尔使用的功能分组标签的东西成为了Web的Lego块。而且他们都没有冒险匆忙转换为HTML5语义标签而破坏其框架的风险。

相关问题
最新问题