如何使整个 div 可点击？

Question

在我的 Wordpress 网站的以下 PHP 代码中，我获取了某些 child 页面的标题和导引，并在无序列表中显示为行项目。我已将每个 LI 放在 div 中。

我已经使用 CSS 让 div 在悬停状态下改变颜色，我想让整个 div 都可以点击，包括它的空白背景。

问题是，只有里面的文字可以点击。 div 的背景没有。我希望整个 div（包括它的空白背景）都可以点击。

我知道在常规 html 中，使整个 div 可点击很容易：只需用 link（"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>';
    }

Answer 1

如果要使 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() . '\'">';

Answer 2

'ul' 标签中唯一允许的内容是 'li' 标签。关于此的更多信息 here

因此，while 循环中的正确顺序是 li -> a -> div。

Answer 3

使用jquery或javascript和ajax（如果您需要发送或接收数据）

$("div").on("click", function(){ //use ajax to send data to server };
//javascript
var div = document.getElementsByTagName("div");
div.onclick = function() { //ajax };

如何使整个 div 可点击？

How can I make this whole div clickable?

html

php

wordpress

clickable