如何让整个“ div”在 html 和 css 中不用 JavaScript 就可以单击？

我想让整个 div 都是可点击的，并且在不使用 JavaScript 和有效代码/标记的情况下单击时链接到另一个页面。

如果我有这个，这就是我想要的结果

<a href="#">
<div>This is a link</div>
</a>

W3C 验证器说块元素不应该放置在内联元素中。还有更好的办法吗？

535995 次浏览
小开

JQuery 允许您这样做。

查找 click()函数: Http://api.jquery.com/click/

例如:

$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
小开

像这样吗？

<div onclick="alert('test');">


</div>
小开

你可以添加 <a></a>标签，把 div 放在里面，如果你想让 div 作为一个链接，你可以添加一个 href。或者使用 Javascript 并定义一个“ OnClick”函数。但是根据提供的有限信息，很难确定问题的背景是什么。

小开

AFAIK 你至少需要一点 JavaScript..。

我建议使用 JQuery。

您可以将此库包含在一行中，然后使用

$('div').click(function(){
// do stuff here
});

并响应点击事件。

小开
最佳答案

一个完整的 div 链接到另一个页面时，点击没有 javascript 和 有效的代码，这可能吗？

迂腐的回答: 不。

正如您已经在另一条注释中提到的，在 a标记中嵌套 div是无效的。

但是，没有什么可以阻止您使 a标记的行为非常类似于 div，只是不能在其中嵌套其他块标记。如果它适合您的标记，在您的 a标记上设置 display:block并按照您喜欢的大小/浮动它。

如果你违背了你的问题的前提，你需要避免使用 javascript，正如其他人指出的那样，你可以使用 onClick 事件处理程序。JQuery 是一个很受欢迎的选择，它使得这个过程变得简单和易于维护。

更新:

在 HTML5中，在 <a>中放置 <div>是有效的。

见 http://dev.w3.org/html5/markup/a.html#a-changes(感谢 达米恩)

小开

可以让一个链接填充整个 div，使得 div 看起来是可点击的。

CSS:

#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}

HTML:

<div id="my-div">
<a href="#" class="fill-div"></a>
</div>
小开

我的解决方案没有 JavaScript/图片。只有 CSS 和 HTML。它可以在所有浏览器中工作。

HTML:

<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>

CSS:

.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}


.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
小开

锚中嵌套的块级元素在 HTML5中不再是 不是无效的。参见 http://html5doctor.com/block-level-links-in-html-5/和 http://www.w3.org/TR/html5/the-a-element.html。 我不是说你应该使用它，但是在 HTML5中使用 <a href="#"><div></div></a>是可以的。

除此之外，公认的答案是最好的。像其他人建议的那样使用 JavaScript 也是不好的，因为它会产生“链接”无法接近(指向不使用 JavaScript 的用户，包括搜索引擎和其他用户)。

小开 
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
小开

没有 JS，我是这样做的:

我的 HTML:

<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
<a href="#" class="mylink">text of my link</a>
</div>

我的 CSS:

.container{
position: relative;
}


.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
小开

我们是这样使用的

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
</div>
</label>
<label for="2">
<div class="options">
<input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

使用

  <label for="1">

标记和捕捉是与

id=1

希望这能帮上忙。

小开 
.clickable {
cursor:pointer;
}

提交答案