语义正确的嵌套锚 [英] Semantically correct nested anchors

问题描述

我正在从事网络应用程序.我们还创建了可以描述为内联编辑的东西.只是为了描绘我要解决的问题，我以Facebook帖子为例.

I am working on a web applicaton. And what we also create is something that could be described as inline editing. Just to portray thing I am trying to solve I use example of Facebook post.

您有喜欢的帖子.

史蒂夫·乔布斯添加了5张新照片

史蒂夫·乔布斯(Steve Jobs)是重定向到他的个人资料的链接，因此在HTML中，它是:

Steve Jobs is link that redirects to his profile so in HTML, that would be:

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div>

但是我想要的是整个帖子块"都是可单击的，尽管我只希望该名称看起来像是链接.通常在HTML逻辑中会这样说:

But what I want is the whole post "block" to be clickable although I want only that name to appear to be link. Normally in HTML logic would say to to this:

<a href="stevejobs/" title="#"><div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div></a>

但这在语义上是不正确的.快速浏览HTML 4.01或任何其他标准时会显示类似以下内容:

But this isn't semantically correct. Quick look to HTML 4.01 or any other standard says something like this:

由A元素定义的链接和锚点不得嵌套；一个A 元素不得包含任何其他A元素.

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

除了使用javascript并为整个"div锚"定义div:hover状态外，如何在语义上正确地创建它?

How to create it semantically correct other than using javascript and defining div:hover state for the whole "div anchor"?

推荐答案

由于您不希望使用javascript(本来会更简单)，因此这里是另一种方法:

Since you don't want javascript(which would have been easier), here is another method:

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p>
</div>

可以添加任何其他样式效果.如cursor: none;等，取决于您想要的效果.

Any other style effects can be added. Such as cursor: none; etc. depending on your desired effect.

这篇关于语义正确的嵌套锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！