处理 div 锚标记内的 div 的任何更好的方法

Question

我正在寻找一种更好的解决方案来处理 Anchor 标记内的整个 div ....

我在一个循环中列出用户.....如果我点击一个用户的块我需要重定向到那个人的页面......有没有更好的解决方案......

我需要先为用户使用锚标记，它应该可以在整个块上使用链接。

这是我的代码

<ul class="no-padding">
    {% for user in users %}
         <a href="{% url 'user-profile' pk=user.pk %}">
            <li class="item padding-15 teams">
                <div class="thumbnail-wrapper d64 circular">
                    <img data-src-retina="{% static 'assets/img/user-64x.png' %}" data-src="{% static 'assets/img/user-64x.png' %}" src="{% static 'assets/img/user-64x.png' %}">
                </div>
                <div class="inline m-l-15">
                    <p class="recipients no-margin hint-text small">{{user.first_name}}</p>
                    <p class="subject no-margin">{{ user.designation }}</p>
                </div>
            </li>
      </a>
    {% endfor %}
</ul>

Answer 1

• 只保留用户名的锚点，您可以添加点击事件监听器 对于 div 或 li 部分。
• 将您正在使用的 url 信息传递给函数并使用 javascript 重定向

希望对你有帮助

redirect(url) {
  location.replace(url);
}

<ul class="no-padding">
    {% for user in users %}
         <a href="{% url 'user-profile' pk=user.pk %}">
          {{user.first_name}}
         </a>
            <li class="item padding-15 teams" onClick="redirect({% url 'user-profile' pk=user.pk %})">
                <div class="thumbnail-wrapper d64 circular">
                    <img data-src-retina="{% static 'assets/img/user-64x.png' %}" data-src="{% static 'assets/img/user-64x.png' %}" src="{% static 'assets/img/user-64x.png' %}">
                </div>
                <div class="inline m-l-15">
                    <p class="recipients no-margin hint-text small">{{user.first_name}}</p>
                    <p class="subject no-margin">{{ user.designation }}</p>
                </div>
            </li>
    {% endfor %}
</ul>