代码之家 › 专栏 › 技术社区 › user1724434

如何使div可链接?

shopify hyperlink html

user1724434 · 技术社区 · 9 年前

我在Shopify主题的主页上有一个块,基本上是一个图像框,上面有文本,当文本被点击时,它链接到一个url。

我希望框本身是可链接的,以防我不使用任何文本。这是下面的代码,使文本成为链接。如何使整个框成为链接?

  `<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>

2 回复 | 直到 9 年前

stuartmccoll 9 年前

将 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/