Php 如何使DIV部分可单击？_Php_Javascript_Css_Html

Php 如何使DIV部分可单击？

php javascript css html

Php 如何使DIV部分可单击？,php,javascript,css,html,Php,Javascript,Css,Html,我写了一个网页，其中的链接都包含在它们自己的标签中。我还用CSS（边框、背景色、填充）制作了所有按钮样式。如何使整个DIV被单击以激活链接？我认为您必须为“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">

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

我认为您必须为“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>


/*********************/
/*边栏*/
/*********************/
#边栏{
宽度：160px；
浮动：左；
边缘顶部：10px；
}
#新闻{
边际：0px；
填充：0px；
列表样式：无；
字体大小：1.2米；
边框顶部：1px虚线#294E56；
右边框：1px虚线#294E56；
}
#新闻李{
显示：内联；
}
#新闻，标题{
字体大小：粗体；
显示：块；
颜色：#666666；
}
#新闻a{
文字装饰：无；
显示：块；
填充物：5px；
边框底部：1px虚线#294E56；
颜色：#73AFB7；
线高：110%；
背景：#FFFFFF url（images/bg/bg_link.png）右上方无重复；
}
/*黑客IE 6<使整个块可点击*/
*html#新闻a{
高度：1px；
}
#新闻甲：悬停{
颜色：#000000；
背景图片：url（images/bg/bg_link_h.png）；
}

你可以在这里看到它的作用：

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


内容

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

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

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

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

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

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

<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中放置一个实际链接，因为如果DIV中没有实际链接，非javascript用户将无法使用该链接。

尝试以下方法：

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

使div可单击。在其内部放置一个a标记，并将其显示为块元素，并使其与div的宽度和高度相同。我一直在这样做。

一些代码将有助于。。。这完全取决于你的意思和你想要如何处理它。我希望整个事情是可点击的，文本和文本周围的区域。对于纯CSS，它通常是通过对“a”标记和“a”标记内的跨距使用CSS来实现的。我忘记了javascript解决方案，不过，正如J-P所评论的，用户将不知道DIV是否是一个链接，是否是clickable.PS。整个东西都可以用纯CSS点击。你只需要调整你的“a”和内部的“span”标签。这是非常糟糕的做法！用户如何确切地知道DIV是一个链接？浏览器为锚提供了一系列额外的行为增强——DIV元素不会以任何方式得到增强。这真的是一个可用性的例子，或者说缺乏可用性！当然，我还有其他一些提示。它们看起来像按钮，当鼠标移到上面时，我将光标设置为更改为选择内容。这只是为了展示我发现问题的解决方案。看看兰斯·麦克尼尔尼发布的例子。这正是你想要的，它不需要javascript。投票通过后，这是一个可行的替代解决方案。对一些人来说，新的可能是在链接中添加“display:block”。默认情况下，div为“块”级别，链接为“内联”。如果您想让内联元素像div（和其他块元素）一样工作，只需像上面那样给它一个“display:block”。谢谢。我正要问一个问题，你的评论告诉我如何解决！如果要使其可单击的div包含其他div，则此操作无效，因为您无法将div嵌入标记中。这很好，但当您将鼠标悬停在状态栏上时，它不会在状态栏中显示url。

$('.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 onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>