如何使一個div可以鏈接？

我在我的Shopify主題的主頁上有一個塊，它基本上是一個帶有文本的圖像框，當文本被點擊時，它鏈接到一個url。如何使一個div可以鏈接？

如果我不使用任何文本，我希望盒子本身可以鏈接。這是使文本成爲鏈接的以下代碼。我怎樣才能讓整個盒子的鏈接？

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

來源

2016-02-05 user1724434

這會讓'了'標籤外'div'標籤外面是什麼？ – Dim13i

你的意思是像下面的stuartmccoll的建議？它沒有工作。 – user1724434

將div定位在您的<a>標記內，如此，給a標記自己的類。這將需要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/

來源

2016-02-05 22:07:58 stuartmccoll

這似乎並不奏效。該div仍然不鏈接 – user1724434

更新了我的原始答案 - 最初沒有看到嵌套的'a'標籤，這可能會導致問題。 – stuartmccoll

雖然我不瞭解CSS部分，但它可以工作。我知道如何添加這個類，但是我沒有看到它在HTML中的使用位置。它在沒有CSS的情況下工作。我錯過了些什麼？ – user1724434

剛剛獲得<a>標籤前面和後面的div標籤。這將使該div超鏈接

來源

2016-02-05 21:56:15 anned20

如何使一個div可以鏈接？

回答

相關問題