Javascript 将链接环绕

是否可以像这样将标签环绕在s上：

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

Eclipse告诉我div的位置不对？

---

如果这是不允许的。如何使整个“layout”类成为链接？

您只需将a标记的样式设置为display:block

Eclipse恰当地告诉您，您的HTML不需要规范，因为在锚定标记中不允许使用div标记

---

但是，由于您似乎希望在视觉上使锚点看起来像一个大的ol框，因此只需将其样式设置为：

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

没有HTML5解析器的旧浏览器，比如说Firefox3.6，仍然会对此感到困惑，可能会弄乱DOM结构

HTML4的三个选项-使用所有内联元素：

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

假设jQuery

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

及

或者最后使用绝对定位来放置一个带有CSS的锚，以覆盖整个.layout

---

当然，这不适用于旧版本的IE

另一个简单的解决方案-只需向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>

虽然标记不允许包含元素，但允许包含其他内联元素，如

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

下面是一个例子：

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

---

蒂莫西的解决方案是正确的。。。而不是将锚绕在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> 

我曾尝试为父DIV创建一个类似于标记的行为

演示：

根据W3C标准，您不能这样做：

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

简单解决方案：

动态解决方案：

最后呼吁：

---

希望这会有所帮助：

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

---

... HTML提供了两个通用元素，其中div是一个自然块元素，span是一个自然内联元素。所有其他元素都类似地指定为自然块或内联元素

现在，虽然这两个都可以通过css显示为任何内联、内联块或块，但出于封装目的，它们仍然被视为它们的自然自我，因此出现了警告消息。豹子和斑点之类的东西

然而，css只是为了使元素看起来像是表示，而不是真正像功能，所以它不会改变元素的基本性质，尽管在实践中这会变得非常模糊。一个跨度制造的积木变成了一个恶霸，把其他一切都踢出界，这是一种非常不内联的行为

因此，为了缓解自然行为和css诱导行为之间可能存在的冲突，最好允许：

div或任何自然块标记只能是块或内联块。 span或任何自然内联标记只能是内联或内联块。 这也将减少构建页面结构的倾向，这些页面结构最终可能会产生大量错误和警告消息

基本上，不要在任何深度将自然块标记嵌入自然内联标记中

之所以会有真正的区别，可能是因为在最初构思HTML时，对它的用途有一个过于简单的想法

当然，框架制作者通过在任何地方使用大量的div，解决了很多问题，而“divitis”诞生了，并且在每个框架中仍然存在。在几乎所有的商业网页上，只需在浏览器中按F12键，然后向下搜索十几个div。这个页面有15个未中断的div级别

不难看出，为什么仅仅选择div是有意义的。例如，一个p标记可能有一组指向不同站点的链接，这是可以的，因为在块p中允许内联链接。但是，如果不希望查询变量在这些URL中可见，则需要按钮。如果只有一个，那么p可以放在表单中，因为p不能包含表单

对于不同站点的多个链接显示为一个段落的一部分，唯一的方法是使用div而不是p，然后将每个按钮以其自己的形式包装为inline。大多数框架都必须处理这么多问题 h更复杂的场景，嵌套div是唯一的方法

---

这意味着他们实际上只需要为每个目的管理一个标记，并将其作为一个隔离的环境进行管理。因此，偶尔使用的功能分组标签成为了网络的乐高积木。他们中没有人会冒着破坏框架的风险，匆忙转换成HTML5语义标签。最后，语义标记只适用于相当静态的内容，而不适用于丰富的交互站点。

将div放在a中在技术上不符合HTML规范。我还可以这样做吗？问题是你为什么要使用div标签。。。如果只是为了JavaScript的占位符之类的。。。只要使用一个显示在块中的SPAN标记，如果你想要块性。另外，SPAN中不能有h2，有什么解决方案吗？你可以在div中放一个锚标记。。。使其成为div中的最后一个元素，并将其样式设置为显示块，若要填充100%的宽度和高度，可能需要指定高度。然后有它的位置：绝对；并具有最外层的div位置：relative。。。这是另一个可能对你有用的解决方案，但归根结底是你在做什么。。。如果不讲30分钟，我真的无法给出一个好的解释：一般来说，你不能有一个内联元素，比如锚或跨度，围绕块级元素，如分区或标题。如何使内部的内容看起来与外部的相同？a不允许包含在a中，这意味着只有短语内容1的元素才能保证在元素内部工作。@lslinnet，这意味着属于短语内容类型，并不是说里面只允许使用短语类型。在内容模型下，是透明的，这意味着父级中允许的任何内容也允许，交互内容除外。出于好奇，这对搜索引擎优化和谷歌机器人爬行公平吗？@JohnBell，通过遵循此解决方案，您只会模仿与DIV元素标记相同的行为。然而，我们并没有从标签中删除HREF属性，所以无论如何，这里不会干扰SEO：是的，这是有意义的。谢谢

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

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

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

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

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