如何使整个 div 可点击？答案

【问题标题】：How can I make this whole div clickable?如何使整个 div 可点击？
【发布时间】：2016-02-28 20:51:08
【问题描述】：

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

【问题讨论】：

您必须提供 css 代码才能让我们提供帮助。从语义上讲，你应该用<li> 包装元素，而不是把它放在<div> 中；）另外考虑关闭和重新打开你的php标签而不是使用这么多的回声，我认为这将有助于代码的可读性。跨度>
在浏览器的页面上右击<a>标签。应该有一个Inspect Element 选项。点击它。你看到了什么？
您发布的内容应该有效。
啊，我们到此结束。

标签： php html wordpress clickable

【解决方案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() . '\'">';

【讨论】：

【解决方案2】：

“ul”标签中唯一允许的内容是“li”标签。更多关于这个here

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

【讨论】：

我不会在这一点上争论，但我确实测试了 OP 的代码（减去我无法运行的函数）并且它确实有效。编辑：我确实添加了自己的自定义函数，并且有效。

【解决方案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 };

【讨论】：