如何使DIV部分可點擊？

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 個解決方案

解決方案1
17 已采納 2009-06-07 18:53:52

解決方案2
4 2009-06-07 19:00:07

解決方案3
3 2009-06-07 18:25:47

解決方案4
1 2010-11-27 15:27:15

解決方案5
1 2011-11-17 16:15:03

解決方案6
-1 2009-06-07 18:30:47

解決方案7
-3 2009-06-07 18:27:36

如何使DIV部分可點擊？

問題描述

7 個解決方案

解決方案1 17 已采納 2009-06-07 18:53:52

解決方案2 4 2009-06-07 19:00:07

解決方案3 3 2009-06-07 18:25:47

解決方案4 1 2010-11-27 15:27:15

解決方案5 1 2011-11-17 16:15:03

解決方案6 -1 2009-06-07 18:30:47

解決方案7 -3 2009-06-07 18:27:36

解決方案1
17 已采納 2009-06-07 18:53:52

解決方案2
4 2009-06-07 19:00:07

解決方案3
3 2009-06-07 18:25:47

解決方案4
1 2010-11-27 15:27:15

解決方案5
1 2011-11-17 16:15:03

解決方案6
-1 2009-06-07 18:30:47

解決方案7
-3 2009-06-07 18:27:36