Question

我写了一个网页，其中的链接都包含在自己的标签中。我也用CSS（边框，背景颜色，填充）制作了所有按钮样式。如何启用单击整个DIV以激活链接？

Answer 1

执行此类效果（使链接像按钮一样）的最佳方法是将css应用于链接本身。这是一个基本的例子：

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

测试它 - 整个按钮是可点击的。它尊重浏览器的正常链接操作，如右键单击，状态URL信息等。

Answer 2

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

<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用户将无法使用该链接。

Answer 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

Answer 4

试试这个：

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

Answer 5

使div可点击。在其中放置一个标签并将其显示为一个块元素，并为其提供与div一样的宽度和高度。

Answer 6

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

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

Answer 7

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

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

如何使DIV部分可点击？

7 个答案: