Question

所以我的问题是我在该卡中有这两个按钮，当我单击它们时，它会重定向到该卡本身正在重定向的链接，那么我可以使它起作用吗？

<a class="panel-product-div-a" href="{{ item.get_absolute_url }}">


    <div style="color: {{ item.checks_color }}" class="p-checks">
      <p>{{ item.checks|safe|linebreaks }}</p>
    </div>
    <span>
      <img {% if item.image %} src="{{ item.image.url }}" {% else %} nop {% endif %} alt="ehm..">
    </span>
    <h1 class="mdh2">{{ item.title }}</h1>


    <div class="panel-button-div">
      <button onclick="window.location.href='{{ item.get_add_to_cart_url }}'"
        class="btn btn-lg btn-primary panel-btn">To cart</button>
      <button onclick="window.location.href='{{ item.get_absolute_url }}'"
        class="btn btn-lg btn-light panel-btn">More info</button>
    </div>


    <div class="con-div">
      {% if item.discount_price %}
      <h1 class="mdh1-discount">
        {{ item.price }}€
      </h1>
      <h1 class="mdh1">
        {{ item.discount_price }}€
      </h1>
      {% else %}
      <h1 class="mdh1">
        {{ item.price }}€
      </h1>
      {% endif %}
    </div>
  </a>

Answer 1

您可以使用event.preventDefault()：

<button onclick="event.preventDefault();window.location.href='{{ item.get_add_to_cart_url }}'"
        class="btn btn-lg btn-primary panel-btn">To cart</button>

这是一个完整的示例：

<html>

<body>
    <a href="card_link">
        <p>My Card text</p>
        <button onclick="event.preventDefault();window.location.href='button_link'">button</button>
    </a>
</body>
</html>

Answer 2

你说

当我单击它们时，它会重定向到卡本身正在重定向的链接

您是否需要链接本身在卡中？您如何尝试删除卡重定向到的链接，然后可以访问按钮链接。

否则，如果您可以访问css，则使用z-index样式有助于将某些元素移到前面或后面，因此您可以为按钮提供更高的z索引，以将它们引入卡的正面。

标签内可以有按钮吗？

2 个答案: