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