Javascript 包裹链接<；a>；周围<；部门>；

是否可以包装

Eclipse告诉我div的位置不对？

---

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

您只需将“a”标记样式设置为

display:block

Eclipse恰当地告诉您您的HTML不符合规范（因为锚定标记中不允许使用div标记）

但是，由于您似乎希望在视觉上，使锚定看起来像一个大的ol框，然后简单地将其样式设置为：）
这种结构在HTML5中是有效的，因为在HTML5中锚定可以包装除其他锚定和表单控件之外的几乎任何元素。现在大多数浏览器都支持这一点，并将问题中的代码解析为有效的HTML。下面的答案写于2011年，如果您支持传统浏览器（*cough*internetexplorer*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）

及


或者最后使用绝对定位放置带有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>

当然，这不适用于旧版本的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上。。。您只需使用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\u类{宽度：100px；高度：100px；}
.div_a类{宽度：100px；高度：100px；显示：块；}
我曾尝试为父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 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>

动态解决方案：

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

最后通话：

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


$（'.box'）.dataURL（）；

希望这会有所帮助：）
使div a链接/可点击的一个简单方法是使用html javascript onclick属性：


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

现在，虽然css
display
可以使它们成为
inline
、
inline block
或
block
中的任何一种，但出于封装目的，它们仍然被视为自然的自我，因此会出现警告消息。豹子和斑点之类的东西

然而，css只是为了使一个元素看起来像什么（表示），而不是实际上像什么（功能），所以它不会改变一个元素的基本性质，尽管这在实践中变得非常模糊。一个
span
make
block
变成了一个恶霸，把其他一切都踢出局，这是一种非常不符合
内联
的行为

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


div
或任何自然块标记只能是
block
或
inline block
span
或任何自然内联标记只能是
inline
或
inline block

这也将减少构建页面结构的倾向，这些页面结构最终可能会产生大量错误和警告消息

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

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

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

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

但是，如果要将指向不同站点的多个链接显示为一个段落的一部分，唯一的方法是使用
div
而不是
p
，然后将每个
按钮以其自己的
形式包装
，设置为
内联
。大多数框架必须处理如此复杂的场景，嵌套的
div
s是唯一的选择

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