如何使 DIV 部分可点击？答案

【问题标题】：How to make a DIV section clickable?如何使 DIV 部分可点击？
【发布时间】：2010-11-01 00:55:28
【问题描述】：

我写了一个网页，其中的链接都包含在它们自己的标签中。我还使用 CSS（边框、背景颜色、填充）为它们制作了所有按钮样式。如何让整个DIV都被点击激活链接？

【问题讨论】：

一些代码会有所帮助......这真的取决于你的意思以及你想如何处理它。

【解决方案1】：

试试这个：

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

【讨论】：

【解决方案2】：

使 div 可点击。在里面放一个a标签并将其显示为块元素，并赋予它与我一直这样做的div相同的宽度和高度。

【讨论】：

【解决方案3】：

我认为您必须为“a”标签编写 CSS，而不是将链接放入 div 并使用 CSS 调整 div。

下面是侧边栏的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

/*********************/
/* SIDEBAR */
/*********************/
#sidebar {
  width: 160px;
  float: left;
  margin-top: 10px;
}

#news {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.2em;
  border-top: 1px dashed #294E56;
  border-right: 1px dashed #294E56;
}
#news li {
  display: inline;
}
#news .title {
  font-weight: bold;
  display: block;
  color: #666666;
}
#news a {
  text-decoration: none;
  display: block;
  padding: 5px;
  border-bottom: 1px dashed #294E56;
  color: #73AFB7;
  line-height: 110%;
  background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top;
}
/* hack for IE 6 < to make entire block clickable */
* html #news a {
  height: 1px; 
}

#news a:hover {
  color: #000000;
  background-image: url(images/bg/bg_link_h.png);
}

</style>
</head>
<body>
<div id="sidebar">
<ul id="news">
    <li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li>
    <li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
</ul>
</div>
</body>
</html>

您可以在这里看到它的实际效果： http://bazanov.net/sidebar

【讨论】：

我希望整个内容、文本以及文本周围的区域都是可点击的。
对于纯 CSS，通常通过对“a”标签和“a”标签内的跨度使用 CSS 来完成。我忘记了 javascript 解决方案，不过，正如 J-P 评论的那样，用户不会知道 DIV 是否是一个链接并且是可点击的。
附言。整个事情都可以用纯 CSS 来点击。你只需要调整你的“a”和内部“span”标签。

【解决方案4】：

这通常通过以下任一方式完成：

<div class='link_wrapper'>
  <!-- there could be more divs here for styling -->
  <a href='example.com'>GOto Example!</a>
</div>

.link_wrapper{
  somestyles: values;
  height: 20px; /*or whatever*/
  width:auto;
  padding:0px;
}
.link_wrapper a{
  line_height:20px; /*same as .link_wapper*/
  margin:0px;
}

现在整个 div 都可以点击了。

使用 Javascript 这也很容易，这里使用 jQuery 是为了方便，但是你可以很容易地在没有 jQuery 的情况下做到这一点（如果你还没有使用它的话）。

$('.link_wrapper')
  .style('cursor', 'pointer') //very important, indicate to user that div is clickable
  .click( function() {
    window.location = $(this).find('a').attr('href');
  }); //Do click as if user clicked actual text of link.

我强烈建议在 DIV 中放置一个实际链接，因为如果 DIV 中没有实际链接，非 JavaScript 用户将无法使用该链接。

【讨论】：

这很好，但是当你将鼠标悬停在它上面时，它不会在状态栏中显示 url。

【解决方案5】：

实现这种效果（使链接像按钮一样）的最佳方法是将 css 应用于链接本身。这是一个基本示例：

a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}

测试一下 - 整个按钮都是可点击的。并且尊重浏览器的正常链接动作，如右键、状态url信息等。

【讨论】：

对某些人来说可能是新的是将“显示：块”添加到链接中。 DIV 默认为“块”级，链接为“内联”。如果你想让内联元素表现得像 div（和其他块元素），只需像上面一样给它一个“显示：块”。
谢谢。我正要问一个问题，你的评论告诉我如何解决！
如果您要使其可点击的 div 包含其他 div，这将不起作用，因为您无法将 div 嵌入标记内。

【解决方案6】：

使用 jQuery，您可以执行类似于 chustar 建议的操作：

$(div#name).click(function(){
    window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')}, 
   function () {$(this).removeClass('hovered')});

【讨论】：

【解决方案7】：

我想出了怎么做。在标签中，创建一个 onclick 属性，然后在该属性中，设置 window.location =（你想去的地方）。如：

<DIV OnClick="window.location='http://stackoverflow.com'">
    Content
</DIV>

【讨论】：

非常糟糕的做法！用户究竟如何知道 DIV 是一个链接？浏览器为锚点提供了一系列额外的行为增强功能 - DIV 元素不会以任何方式增强。这确实是可用性的一个案例，或者缺乏可用性！
当然我会有一些其他的提示。它们看起来像按钮，当它们悬停时，我将光标设置为更改为选择的东西。这只是为了显示我发现问题的解决方案。
查看 Lance McNearney 发布的示例。这正是您正在寻找的，它不需要 javascript。
投票，这是一个可行的替代解决方案