Question

在我的Wordpress网站的以下PHP代码中，我获取某些子页面的标题和列表，并在无序列表中显示为行项目。我把每个李放在一个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>';
    }

Answer 1

如果您想让DIV可点击，您可以使用它的onclick属性。

这是一个简单的html：

＆＃13;

<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>

＆＃13;

对于你的情况，它将是：

echo '<div onclick="document.location=\'' . get_permalink() . '\'">';

Answer 2

“＆＃39; ul”中允许的唯一内容标签是＆＃39; li＆＃39;标签。有关此here

的更多信息

因此，while循环中的正确顺序是li - ＆gt; a - ＆gt;格。

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可点击？

3 个答案: