logo标签列表

如何使DIV区域可点击？

phpjavascriptcsshtml
5

我已经写了一个网页，并且链接都包含在自己的标签内。我还使用CSS将它们全部设置为按钮样式（边框，背景颜色，填充）。如何启用整个 DIV 点击以激活链接？

一些代码会有所帮助...这实际上取决于您的具体意思以及您想如何处理它。 - tvanfosson
7个回答
17

实现将链接表现为按钮的最佳方法是将CSS应用于链接本身。以下是一个基本示例：

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

测试一下——整个按钮都是可以点击的。而且它遵循浏览器的常规链接操作，比如右键单击、状态 URL 信息等。

6
对于一些人来说，可能是新的知识点是在链接中添加"display: block"。DIV元素默认为“block”级别，而链接为“inline”。 如果您希望行内元素像div（和其他块级元素）一样运作，只需像上面那样给它一个"display: block"即可。 - Ryan Florence
谢谢。我正要问一个问题，你的评论告诉我如何解决！ - chustar
4
如果您想使一个包含其他 div 的 div 具有可点击性，那么这种方法行不通，因为您无法在 <a> 标签内嵌套 div。 - Head
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。 - Head
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
我希望整个东西都可以被点击，包括文字和文字周围的区域。 - chustar
通常使用CSS来处理“a”标签和“a”标签内的span。但是我忘记了JavaScript解决方案，正如J-P所评论的那样，用户将不知道DIV是否是链接并且可点击的。 - nightcoder
PS. 整个东西可以用纯CSS实现点击。你只需要调整“a”和内部的“span”标签即可。 - nightcoder
1

试试这个：

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
1
为了使一个 div 具有可点击性，可以在其中放置一个 a 标签，并将其显示为块级元素，并将其宽度和高度设置为与 div 相同。我经常这样做。
-1

使用jQuery，您可以做类似于chustar建议的事情:

$(div#name).click(function(){
    window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')}, 
   function () {$(this).removeClass('hovered')});
-3
我找到了如何做到这一点。在

标签中，创建一个 onclick 属性，然后在该属性中设置 window.location =（您要前往的位置）。 例如：

<DIV OnClick="window.location='http://stackoverflow.com'">
    Content
</DIV>
1
非常糟糕的做法！用户怎么知道 DIV 是一个链接呢？浏览器会为锚点提供许多额外的行为增强 - DIV 元素不会以任何方式增强。这真的是一个可用性问题，或者说缺乏可用性！ - James
当然，我还有一些其他的提示。它们看起来像按钮，当鼠标悬停时，我将光标设置为更改选择的东西。这只是为了展示我找到的问题解决方案。 - chustar
1
看看Lance McNearney发布的例子。那正是你要找的，而且不需要JavaScript。 - slosd
点赞，这是一个可行的替代方案。 - Rahul
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接