带有href链接的跨度不起作用

Posted 2023-03-05

【中文标题】带有href链接的跨度不起作用

【英文标题】：Span with a href link not working

【发布时间】：2014-05-23 19:29:12

【问题描述】：

正在努力将 href 放在 span 类中，但我无法让 href 链接正常工作。

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger"></span></a>

标签危险也不会出现。

【问题讨论】：

如果您希望班级覆盖a 元素，难道不应该反过来（锚嵌入跨度中）吗？为什么不将课程分配给 a ？ “不出现”是什么意思？

你don't want to use a GET for logging out.

【参考方案1】：

Link to working span - Bootply

这是因为 CSS 中的这一行：

.label:empty
  display:none;

如果你在span 标签之间写一些东西，它会起作用。

<a href="../../public/bassengweb/logout"><span class="label label-danger">Logg ut</span></a>

虽然，“正常”引导标签在悬停时看起来很糟糕，也许可以这样做：

<a href="../../public/bassengweb/logout">Logg ut</a><span class="label label-danger">Danger</span>

【参考方案2】：

这是最好的方法！它工作简单干净。

<span onclick="window.location.href='www.google.com';">text</span>

然后你可以给它一个class:hover作为颜色

【讨论】：

这是terrible for accessibility。它不能通过键盘访问，并且会阻止许多其他交互，例如右键单击、Shift+单击、拖放。

【参考方案3】：

<span> 类 label 应该有内容， 检查 Boostrap 的示例Boostrap Component - Label 也许你应该尝试放一个“x”

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger">x</span></a>

或者使用字形图标，也许

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger"><span class="glyphicon glyphicon-circle-arrow-right"></span></span></a>

【参考方案4】：

对于标签 css 使用：

class="label label-important"

它对我有用