本文介绍了如何使整个产品项目卡片可点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这样的产品卡:
如您所见,卡片末尾有一个名为Buy
的超链接。
但不是这个链接,我需要用另一个超链接使整个卡片都可以点击。 (因此用户不需要点击购买链接,他们只需点击卡内的任何位置)
这是这张卡的代码:
<div class="item">
<div class="card border-0 position-relative">
<div class="">
<img src="" class="card-img-top" alt="">
</div>
<div class="stars position-absolute">
<form id="starRate" action="" data-id="">
<label class="star star-5 storeRate"></label>
<label class="star star-4 storeRate"></label>
<label class="star star-3 storeRate"></label>
<label class="star star-2 storeRate"></label>
<label class="star star-1 storeRate"></label>
</form>
</div>
<div class="card-body text-center">
<h5 class="card-title">
Title
</h5>
<div class="price">
<p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
<p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
</div>
<a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
</div>
</div>
那么,如何才能在不对卡片样式进行任何不必要的更改的情况下使整个卡片可点击呢?
推荐答案
将整个div
放在a
标记内。
<a href="">
<div class="item">
<div class="card border-0 position-relative">
<div class="">
<img src="" class="card-img-top" alt="">
</div>
<div class="stars position-absolute">
<form id="starRate" action="" data-id="">
<label class="star star-5 storeRate"></label>
<label class="star star-4 storeRate"></label>
<label class="star star-3 storeRate"></label>
<label class="star star-2 storeRate"></label>
<label class="star star-1 storeRate"></label>
</form>
</div>
<div class="card-body text-center">
<h5 class="card-title">
Title
</h5>
<div class="price">
<p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
<p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
</div>
<a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
</div>
</div>
</a>
这篇关于如何使整个产品项目卡片可点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!