如何使整个div可点击？
[英]How can I make this whole div clickable?
问题描述
In the following PHP code for my Wordpress site, I grab the title and lede of certain child pages and display as line items in an unordered list. 
在我的Wordpress网站的以下PHP代码中，我抓取了某些子页面的标题和目录，并以订单项的形式显示在无序列表中。 I've put each LI in a div. 我已将每个LI放在一个div中。
I've used CSS to make the div change colors in its hover state and I'd like to make the entire div clickable, including its empty background. 我使用CSS使div处于其悬停状态时更改颜色，并且我想使整个div可单击，包括其空的背景。
Problem is, only the text inside becomes clickable. 问题是，只有其中的文本才可以单击。 The background of the div does not. div的背景没有。 I want the whole div (including its empty background) to be clickable. 我希望整个div（包括其空白背景）都是可点击的。
I know that in regular html, making an entire div clickable is easy: simply surround it with link ("a href" and "/a") tags. 我知道在常规html中，使整个div可点击是很容易的：只需用链接（“ a href”和“ / a”）标签将其包围即可。
That doesn't seem to work here -- only the text within becomes clickable. 这似乎在这里不起作用-只有其中的文本可以单击。 Is there a way to make the whole div (including its empty background) clickable? 有没有一种方法可以使整个div（包括其空白背景）可点击？ Here's the code. 这是代码。 Thank you! 谢谢！
/* Get the children of the services page */
$args = array(
'post_type' => 'page',
'post_parent' => $services_id
);
$services_query = new WP_Query( $args );
// Grab the title and lede and display them in an unordered list
if ( $services_query->have_posts() ) {
echo '<ul class="services-list">';
while ( $services_query->have_posts() ) {
$services_query->the_post();
echo '<a href="' . get_permalink() . '" title="' . get_the_title() . '">';
//Shouldn't this whole div be clickable? Note the link tag echoed above...
echo '<div>';
echo '<li class="clear">';
echo '<h3 class="services-title">' . get_the_title() . '</h3>';
echo '<div class="services-lede">';
the_content();
echo '</div>';
echo '</li>';
echo '</div>'; //end of clickable div
echo '</a>'; //closed anchor tag
}
echo '</ul>';
}
3 个解决方案
解决方案1
1 已采纳 2016-02-28 21:03:17
If you want to make the DIV clickable you can use the onclick attribute of it. 如果要使DIV可单击，则可以使用它的onclick属性。
Here is a plain html to do that: 这是一个简单的html来做到这一点：
<html> <body> <div style="background: #c0c0c0" onclick="javascript:alert('bla');"> this is a clickable DIV </div> <div style="background: #e0e0e0"> this is not a clickable DIV </div> </body> </html>
For your case it would be: 对于您的情况将是：
echo '<div onclick="document.location=\'' . get_permalink() . '\'">';
解决方案2
1 2016-02-28 21:07:40
解决方案3
0 2016-02-28 22:00:30
Use jquery or javascript and ajax (in case you need to send data or receive) 使用jquery或javascript和ajax（以防您需要发送或接收数据）
$("div").on("click", function(){ //use ajax to send data to server };
//javascript
var div = document.getElementsByTagName("div");
div.onclick = function() { //ajax };
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.