2

我正在开发一个网络应用程序。我们还创造了可以被描述为内联编辑的东西。只是为了描绘我试图解决的问题，我使用 Facebook 帖子的示例。

你有帖子喜欢。

Steve Jobs 上传了 5 张新照片

史蒂夫乔布斯是重定向到他的个人资料的链接，所以在 HTML 中，这将是：

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

但是我想要的是整个帖子“块”都是可点击的，尽管我只希望该名称看起来是链接。通常在 HTML 逻辑中会这样说：

<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 或任何其他标准都会这样说：

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

除了使用 javascript 和为整个“div 锚”定义 div:hover 状态之外，如何在语义上正确地创建它？

4

6 回答 6

3

由于您不想要 javascript（这会更容易），所以这是另一种方法：

<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;等等看你想要的效果。

于 2012-10-13T15:09:48.910 回答
2

HTML： 

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

CSS：

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ }
.post-block p span.author { display: inline-block; }
.post-block p span.posttext { display: inline-block; }
于 2012-11-20T05:19:12.647 回答
1

多年来我一直有同样的问题，因为我也想维护 HTML 语义和 SEO 语义，例如标题标签和段落等，同时仍然保持默认锚行为，例如在浏览器中指示目标 URL，保持标签完整并保持默认的锚点悬停动作，JavaScript 本身并不这样做。

我能想到的最佳解决方案是在（覆盖）内容上放置一个绝对定位的块级锚点，并使用父元素的悬停动作将任何行为集成到实际内容中，这在语义上是正确的，应该由所有网络爬虫，因此：

.post-block {
  position: relative;
}

.post-block p span.anchor {
  text-decoration: underline;
}

.post-block:hover p span.anchor {
  text-decoration: none;
}

.postblock a.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* to be on the safe side */
  text-indent: -9999em;
}
<div class="post-block">
  <p><span class="anchor">Steve Jobs</span> added 5 new photos.<p>
  <a class="overlay" href="stevejobs/" title="#">Steve Jobs</a>
</div>

这适用于块和网格布局，甚至可以很好地与触摸设备配合使用，因为锚本身没有悬停动作 - 有些设备会劫持第一次点击:)

不是 100% 确定搜索引擎是否会惩罚文本缩进，但有许多额外的解决方法，在这里讨论让任何感兴趣的人开始。

于 2014-11-24T18:00:06.243 回答
1

在 HTML5 中，a可以用作块级元素。

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

现在，使用 CSS ( ) 删除默认链接样式.post-block a {text-decoration:none;}。

要获取名称的链接样式，请将名称包含在一个元素中并添加一个类，如“name”。该b元素在这里是一个合适的选择（否则使用span）：

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

现在恢复样式：.post-block .name {text-decoration:underline;}.

如果您愿意，将名称包含在元素中甚至允许您使用微格式 hCard。

于 2012-10-13T15:33:38.630 回答
0

只需将第二个示例中“史蒂夫乔布斯”周围的锚标记替换为跨度并根据需要设置样式：

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

使用 CSS：

a {
    cursor: default;
}
.post-block-user {
    font-weight: bold;
    cursor: pointer;
}

或您希望应用或不应用的任何样式。实际上，我会尝试丢失 div 并将类放在锚标记上，除非有其他原因保持该结构。

于 2012-10-13T15:15:44.603 回答
0

禁止嵌套锚标记。

如果您只想将名称显示为链接，请使用锚标记。如果您需要整个块可点击，请在 jquery 的 onclick 函数中执行此操作。就像是

$(.post-block).click(//your function);
于 2017-07-17T13:41:03.097 回答