如何使整个产品项目卡可点击

Posted 2023-03-28

【中文标题】如何使整个产品项目卡可点击

【英文标题】：How to make the whole product item card clickable

【发布时间】：2021-09-15 23:21:38

【问题描述】：

我有一张这样的产品卡：

如您所见，卡片末尾有一个名为Buy 的超链接。

但不是这个链接，我需要使用另一个超链接使整个卡片可点击。 （因此用户无需点击购买链接，他们只需点击卡片内的任何位置即可）

这是这张卡的代码：

<div class="item">
    <div class="card border-0 position-relative">
            <div class="">
                <img src="" class="card-img-top" >
            </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>

那么如何在不对卡片样式进行任何不必要的更改的情况下使整张卡片可点击。

【问题讨论】：

在bg-Gray-shop btn-Hover 上添加课程stretched-link 更多参考此链接getbootstrap.com/docs/4.6/utilities/stretched-link

也许这会有所帮助？ ***.com/questions/37143970/…

【参考方案1】：

把你的整个div 放在a 标签内。

<a href="">
  <div class="item">
    <div class="card border-0 position-relative">
            <div class="">
                <img src="" class="card-img-top" >
            </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>

【讨论】：

这个我试过了，会影响轮播风格

@tejoslaeslio 你可以试试<div onclick="location.href='#';" style="cursor: pointer;"> </div>。

嵌套链接是非法的

【参考方案2】：

在卡后添加链接并在立即购买前关闭。这将解决您的问题。

解析器有效地将打开元素中的开始标记视为在开始新元素之前隐式终止打开元素。

所以如果你写<a href=foo>foo <a href=bar>bar</a> zap</a>，你不会得到嵌套元素。浏览器会将其解析为<a href=foo>foo</a> <a href=bar>bar</a>zap，即两个连续的链接后跟一些纯文本。

<div class="item">
  <div class="card border-0 position-relative">
    <a href="#">
      <div class="">
        <img src="" class="card-img-top" >
      </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>
    <a href="" class="btn bg-Gray-shop btn-Hover">Buy</a>
  </div>
</div>