<a>元素出现在里面，尽管我把它放在外面

Question

我有一个名为card.html的django模板文件

在此文件中，锚标记位于外部。

<a class="url d-block" href="{% if content_type == 'book' %} {% url 'book' content.id|default:1 %} {% else %} {% url 'article' content.id|default:1 %} {% endif %}">
    <div class="card d-flex flex-column border border-1 rounded">
        <div class="p-5 bg-light">
            <img src="{{ content.thumbnail }}" class="thumbnail img-fluid rounded">
        </div>
        <div class="flex-grow-1 p-4 border-top border-1">
            <h3 class="category fs-5 text-secondary">{{ content.category.first }}</h3>
            <h2 class="title fs-4 mb-2 text-dark">{{ content.title }}</h2>
            {% if content_type == "book" %}
                <a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q={{content.book_author|default:''}}">By {{ content.book_author }}</a>
                <h3 class="author fs-5 text-dark">Summarized by <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></h3>
            {% else %}
                <h3 class="author fs-5 text-dark">Created by <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></h3>
            {% endif %}
        </div>
        <div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
            <p class="date-created d-inline">{{ content.date_created }}</p>
            <i class="fa-solid fa-star mt-1"></i>
            <i class="fa-solid fa-ellipsis-vertical mt-1"></i>
        </div>
    </div>
</a>

card.html包含在该模板中( div位于主体内)。

<div id="list-container" class="d-flex flex-wrap justify-content-center gap-4 pb-5 px-5">
        {% for content in content_list %}
            {% include "app/card.html" with visibility="visible" %}
        {% empty %}
            <h2>No {{ content_type }} for now..</h2>
        {% endfor %}
</div>

当渲染时，它看起来像这样。

锚标记以某种方式自行关闭并进入div内。

<a class="url" href=" /books/1 "></a>
<div class="card d-flex flex-column border border-1 rounded">
    <a class="url" href=" /books/1 ">
        <div class="p-5 bg-light">
            <img src="img.jpg" class="thumbnail img-fluid rounded">
        </div>
    </a>
    <div class="flex-grow-1 p-4 border-top border-1">
        <a class="url" href=" /books/1 ">
            <h3 class="category fs-5 text-secondary">Example Category</h3>
            <h2 class="title fs-4 mb-2 text-dark">Title</h2>
        </a>
        <a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q=Name">By Name</a>
        <h3 class="author fs-5 text-dark">Summarized by <a href="/user/Archer">Archer</a></h3>
        
    </div>
    <div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
        <p class="date-created d-inline">May 3, 2022, 9 a.m.</p>
        <i class="fa-solid fa-star mt-1"></i>
        <i class="fa-solid fa-ellipsis-vertical mt-1"></i>
    </div>
</div>

Answer 1

不能在<a>标记内使用<a>标记。HTML不允许嵌套标记。

您可以使用onclick事件，但是必须使用javascript检查哪个元素是单击的，因为父元素是一个包装器。