在我的WordPress网站的以下PHP代码中，我抓取了某些子页面的标题和lede，并在无序列表中显示为行项目。 我已经把每个 LI 放在一个div 中。
我已经使用 CSS 使div 在其悬停状态下更改颜色，我想使整个div 可点击，包括其空背景。
问题是，只有里面的文本是可点击的。div 的背景没有。 我希望整个div（包括其空背景）是可点击的。
我知道在常规 html 中，使整个div 可点击很容易：只需用链接（"a href"和"/a"）标签将其包围即可。
这似乎在这里不起作用 - 只有其中的文本变得可点击。 有没有办法使整个div（包括其空背景）可点击？ 这是代码。 谢谢！
/* 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>';
}
如果要使DIV可单击，可以使用它的onclick属性。
这是一个普通的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>对于您的情况，它将是：
echo '<div onclick="document.location='' . get_permalink() . ''">';
"ul"标签中唯一允许的内容是"li"标签。更多关于这方面的信息
这里因此，while 循环中的正确顺序是 li -> a ->div。
使用 jquery 或 javascript 和 ajax（以防您需要发送或接收数据）
$("div").on("click", function(){ //use ajax to send data to server };
//javascript
var div = document.getElementsByTagName("div");
div.onclick = function() { //ajax };