如何使整個div可點擊？

Question

在我的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>';
    }

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”標簽。 在這里更多

因此，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可點擊？

問題描述

3 個解決方案

解決方案1
1 已采納 2016-02-28 21:03:17

解決方案2
1 2016-02-28 21:07:40

解決方案3
0 2016-02-28 22:00:30

如何使整個div可點擊？

問題描述

3 個解決方案

解決方案1 1 已采納 2016-02-28 21:03:17

解決方案2 1 2016-02-28 21:07:40

解決方案3 0 2016-02-28 22:00:30

解決方案1
1 已采納 2016-02-28 21:03:17

解決方案2
1 2016-02-28 21:07:40

解決方案3
0 2016-02-28 22:00:30