Question

我想这样做，以便在没有JavaScript和有效代码/标记的情况下单击时可以单击整个div并链接到另一个页面。

如果我有这个我想要的结果 -

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

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

Answer 1

可以使链接填充整个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>

Answer 2

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

迂腐的回答：不。

由于您已经发表了另一条评论，因此将div嵌套在a代码中无效。

但是，没有什么能阻止您使a标记与div的行为非常相似，除了您无法在其中嵌套其他块标记。如果它适合您的标记，请在display:block标记上设置a，然后根据需要调整大小/浮动。

如果你违背了你的问题的前提，你需要避免使用javascript，正如其他人指出的那样，你可以使用onClick事件处理程序。 jQuery是使这个变得简单易维护的流行选择。

Answer 3

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

Answer 4

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

Answer 5

我的解决方案没有JavaScript /图像。只使用CSS。它适用于所有浏览器。

<强> HTML：

<a class="add_to_cart" href="https://www.redracingparts.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;
}

https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

上有一个例子

Answer 6

在 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的用户，包括搜索引擎和其他用户）。

Answer 7

jQuery允许你这样做。

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

示例：

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

Answer 8

你可以添加<a></a>标签并将div放在其中，如果你想让div作为一个链接，你可以添加一个href。或者只是使用Javascript并定义'OnClick'功能。但是根据提供的有限信息，确定问题的背景有点困难。

Answer 9

.clickable {
  cursor:pointer;
}

Answer 10

这样的东西？

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

</div>

Answer 11

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

我建议使用jQuery。

您可以将此库包含在一行中。然后你可以用

访问你的div

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

并回复点击事件。

Answer 12

我们正在使用这样的

     <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

希望这会有所帮助。

如何在没有JavaScript的情况下使html和css中的整个'div'可点击？

12 个答案: