如何使整个产品项目卡片可点击-前端问题

How to make the whole product item card clickable(如何使整个产品项目卡片可点击)

本文介绍了如何使整个产品项目卡片可点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这样的产品卡：

如您所见，卡片末尾有一个名为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>

这篇关于如何使整个产品项目卡片可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！