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

Question

我有一张这样的产品卡片：

如你所见，卡片末尾有一个名为Buy的hyperlink。

但我需要用另一个 hyperlink 让整张卡片都可以点击，而不是这个 link。（因此用户无需点击“购买”link，他们只需点击卡片内的任意位置即可）

这是这张卡的代码：

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

那么我怎样才能让整张卡片都可以点击，而不会对卡片的样式做任何不必要的更改。

Answer 1

将整个 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>

Answer 2

在卡片后面添加link，立即购买前关闭。这将解决您的问题。

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

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

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

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

How to make the whole product item card clickable

html

css

carousel

shopping

card