Question

我的Shopify主题主页上有一个块，它基本上是一个带有文本的图像框，单击文本时会链接到网址。

我希望盒子本身可以链接，以防我不使用任何文字。这是下面的代码，使文本成为一个链接。如何让整个盒子成为链接？

  `<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>标记内，如此，为a标记提供自己的类。这将需要CSS样式，如下所示：

.className {
    display:block;
{

现在，<a>中的<div>标记会导致您遇到问题，因此您需要将其更改为元素，下面的示例会将其更改为<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/

Answer 2

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

如何使div可链接？

2 个答案: