如何使 div 可链接？

Question

我的 Shopify 主题主页上有一个块，它基本上是一个上面有文本的图像框，单击文本时，它 links 到 url。

我希望框本身 link 可用，以防我不使用任何文本。这是下面的代码，使文本成为 link。我怎样才能使整个盒子成为 link?

  `<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="img1">
        <a href="{{ settings.home_blockhtml_link_1 }}">             
          {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}                               
          <div class="description">
            <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
            <p class="text">{{ settings.home_blockhtml_des_1 }}</p>         
            <p class="button hidden-md hidden-sm hidden-xs"><a class="btn btn-outline-small" href="{{ settings.home_blockhtml_link_1 }}" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</a></p>
          </div>    
        </a>        
    </div>  
</div>

`

Answer 1

只需获取div标签前后的<a>标签即可。这将使 div 成为超链接

Answer 2

将 div 放置在您的 <a> 标签内，就像这样，为 a 标签提供自己的 class。这将需要 CSS 样式，如下所示：

.className {
    display:block;
{

现在，<div> 中的 <a> 标签会给您带来问题，因此您需要将其更改为元素，下面的示例将其更改为 <span>。

<a href="{{ settings.home_blockhtml_link_1 }}" class="className">
<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="img1">


      {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}

      <div class="description">
        <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
        <p class="text">{{ settings.home_blockhtml_des_1 }}</p>

        <p class="button hidden-md hidden-sm hidden-xs"><span class="btn btn-outline-small" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</span></p>
      </div>

    </div>

</div>

</a>

参见：https://jsfiddle.net/88fx4p3x/

如何使 div 可链接？

How to make a div linkable?

html

hyperlink

shopify