Question

我想制作整个＆＃34;主题＆＃34; div可点击。你可以在下面看到代码。我尝试在第一个div之前使用<a href="##"> </a>，但它只会使图片可点击而不是整个div。

<?php
   $toppic = $app->get_topics();
   foreach($toppic as $topic){
    echo '<div id="topic">';
    echo '<div id="topicimg">';
      if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
   echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
      } else {
         echo '<i class="fa fa-fw fa-user img-circle"></i>';
      }
      echo '</div><div id="topictekst">';
      echo '<b><a href="https://####/reactie"> '.$topic['topicnaam'].'</b></a>'; 
      echo '<a> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</a>' ;
      echo '<a style="float:right; margin-top:15px;"> reacties</a> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
      echo '<hr><a><span class="badge bg-red">' . $board['topic'] . '</span></a>';
      echo '</div></div>';
     }
  ?>

How it looks like

这有效！

现在唯一的问题是，因为我无法嵌套a标记，因此我无法在右侧显示reacties，因为它的样式为float: right。

<?php
       $toppic = $app->get_topics();
       foreach($toppic as $topic){
        echo '<a href="https://####/reactie"><div id="topic">';
        echo '<div id="topicimg">';
          if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
       echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
          } else {
             echo '<i class="fa fa-fw fa-user img-circle"></i>';
          }
          echo '</div><div id="topictekst">';
          echo '<b> '.$topic['topicnaam'].'</b>'; 
          echo ' - ' . $topic['voornaam'] . " " . $topic['achternaam'] ;
          echo ' reacties <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
          echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
          echo '</div></div></a>';
         }
      ?>

Answer 1

尝试在标签中包含你的div。

例如：

<a href="www.google.com">

     <div></div>
</a>

在上面的示例中，您应该能够点击div上的任意位置，并且应该登陆Google的页面。

在HTML5中，允许将div这样的块内容放在锚标记内。这取决于您使用的HTML版本，因为它不适用于HTML 4。

Answer 2

您的代码无法正常工作，因为您有嵌套的a元素，这是无效的HTML - 这是如何做到的：

<?php
    $toppic = $app->get_topics();
    foreach($toppic as $topic){
        echo '<a href="https://####/reactie"><div class="topic">';
        echo '<div class="topicimg">';
        if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
           echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
        } else {
            echo '<i class="fa fa-fw fa-user img-circle"></i>';
        }
        echo '</div><div class="topictekst">';
        echo '<b> '.$topic['topicnaam'].'</b>'; 
        echo '<span> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</span>' ;
       echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
       echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
       echo '</div></div></a>';
    }
?>

请注意，我已将id属性替换为class，因为您不能拥有多个具有相同ID的元素，因此在您的css / JS选择器中，您需要将其作为{{ 1}}而不是.topic { <style> }（同样适用于#topic { <style> }）

编辑 - 如果您想在图标前显示＆＃34; reacties＆＃34; ，您可以更改此行：

.topicimg

用

echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';

从内部评论图标范围中删除echo '<span style="float:right; margin-top:15px;"> reacties <span style="color:grey;" class="fa fa-comment"></span></span>';，并将文字和图标包装在向右浮动的单个float:right;中

使我的整个<div>可点击

2 个答案: