问答中心分类: HTML什么是href=“#”以及为什么使用它?
0
匿名用户 提问 17小时 前

在许多网站上,我看到的链接href="#".这是什么意思?它是用来做什么的?

9 Answers
0
m59 回答 17小时 前

关于超链接:
锚定标签的主要用途-<a></a>-作为超链接这基本上意味着他们会带你去某个地方。超链接需要href属性,因为它指定了位置。
搞砸:超链接中的哈希-`#`指定窗口应滚动到的HTML元素id。href="#some-id"将滚动到当前页面上的元素,例如<div id="some-id">.
href="//site.example/#some-id"将前往site.example然后滚动到该页面上的id。
滚动到顶部:
href="#"不指定id名称,但有相应的位置-页面顶部。用鼠标单击定位点href="#"将滚动位置移到顶部。
请参阅此演示。
这是根据w3文档。
超链接占位符:
超链接占位符有意义的示例是在模板预览中。在模板的单页演示中,我经常看到<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">因此,锚定标记是一个超链接,但不会出现在任何地方。为什么不离开href属性为空?空白href属性实际上是指向当前页面的超链接。换句话说,它将导致页面刷新。正如我所讨论的,href="#"也是一个超链接,并导致滚动。因此,超链接占位符的最佳解决方案实际上是href="#!"这里的想法是希望页面上没有包含id="!"(是谁干的!?)因此,超链接指的是什么都没有,所以什么都没有发生。
关于定位标记:
您可能想知道的另一个问题是,“为什么不关闭href属性?”。我听到的一个常见反应是href属性是必需的,因此它“应该”出现在锚上。这是假的!这个href属性仅在锚点实际成为超链接时才是必需的!阅读这来自w3那么,为什么不把它留给占位符呢?浏览器呈现元素的默认样式,并将更改不具有href属性的锚定标记的默认样式。相反,它将被视为常规文本。它甚至改变了浏览器关于元素的行为。在没有href属性的锚点上悬停时,状态栏(屏幕底部)将不会显示。最好在锚点上使用占位符href值,以确保它被视为超链接。
查看此演示展示风格和行为差异。

overexchange 回复 17小时 前

完整答案。但是,这个词是什么意思模板预览在你的回答中?

m59 回复 17小时 前

@例如,请参阅本页及其链接:ironsummitmedia.github.io/startbootstrap-creative只是用来演示一组CSS/html、WordPress主题等的html页面,但不是真正的页面,所以链接不需要放到任何地方。

Yeung 回复 17小时 前

只是想问一下<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">是否将触发以再次请求服务器?我看过一个例子,通过点击“超链接”,网页的内容发生了变化。只是Javascript检测到点击并做些什么吗?

m59 回复 17小时 前

@杨更改散列(即url中#后面的部分)不会调用服务器。您可以使用javascript更改页面。关于这个问题有很多要说的,这超出了本文的范围。

Steely 回复 17小时 前

此外,Android浏览器(浏览器、chrome等)除了锚定标签外,不会接受任何点击事件。假设您想使用jQuery的.click()方法<div></div>,它不会工作。要么在锚点上,要么你必须使用touch事件。

QHarr 回复 17小时 前

我找不到文档链接上面写着href=“#”将滚动位置移动到顶部

m59 回复 17小时 前

@QHarr我不是肯定的,但这应该是因为一个空的“#”并没有指任何东西,所以这与去掉它是一样的,去掉它只会指页面,页面从顶部开始,除非另有说明。换言之,它可能并不意味着“滚动到顶部”,它只是意味着什么也没有,即“转到本页”,这恰好意味着转到页面顶部。

user359996 回复 17小时 前

@QHarr您共享的链接说,“如果fragment是空字符串,那么文档的指定部分就是文档的顶部”。

QHarr 回复 17小时 前

谢谢@user359996你确实是对的。

netskink 回复 17小时 前

谢谢你冗长的解释。我很感激。它与前面的简短回答很吻合。

user2402616 回复 17小时 前

href='#!'这是一个巧妙的技巧,也是我刚刚实施的一个。您也可以通过使用e.preventDefault()anchors onClick事件更新:仅包括href='#!'仍会更新浏览器中的url(e.preventDefault()如果需要,将阻止这种情况发生)

0
KJYe.Name 回答 17小时 前

将“#”符号作为某个内容的href表示它不指向其他URL,而是指向同一页面上的另一个id或名称标记。例如:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

然而,如果没有id或名称,则会显示“no where”
这里还有一个类似的问题带有“name”或“id”的HTML锚?

Oded 回复 17小时 前

ID为的元素——它不必是命名锚(事实上,命名锚已经被弃用了一段时间)。

doug65536 回复 17小时 前

我来这里是因为<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">...</a>不是“哪儿也不去”而是离开页面并加载site.com/#.这怎么可能?

jtate 回复 17小时 前

@doug65536很可能是因为onclick事件处理程序绑定到该元素,导致调用一个javascript函数,将您重定向到该页面。

0
Aufgeschissener Kunde 回答 17小时 前

不幸的是<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">是由懒惰的程序员设计的,他们想要可点击的非超链接javascript编码元素,这些元素的行为类似于锚,但他们不能被强迫添加cursor: pointer;:hover将其非超链接元素的样式设置为类,并且由于太懒而无法设置hrefjavascript:void(0);.
问题是这个<a href="https://stackask.cn/go.php?go=Iw==" target="_blank" onclick="some_function();">或者另一个不可避免地以javascript错误结束,而带有onclick javascript错误的锚点总是以其href通常,这会让人恼火地跳转到页面顶部,但对于使用<base>,<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">处理为<a href="[base href]/#">,导致意外的导航。如果如果生成了任何可记录的错误,则在后一种情况下不会看到它们,除非启用持久日志。
如果锚元素是用作非锚点it应该拥有它href设置为javascript:void(0);为了优雅的堕落
我只是浪费了两天的时间调试了一个随机的意外页面重定向,该重定向本应只是刷新页面,最后跟踪到一个引发<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">.更换#具有javascript:void(0);修复了它。
我周一要做的第一件事是清除项目中所有<a href="https://stackask.cn/go.php?go=Iw==" target="_blank">.

Vito De Tullio 回复 17小时 前

“如果锚元素用作非锚元素,则应将其href设置为javascript:void(0);以实现优雅的降级。”[需要引用]

LeOn - Han Li 回复 17小时 前

Y、 带和不带<base>真的对#谢谢你的指点!

Liang 回复 17小时 前

我只是浪费了两天的时间调试了一个随机的意外页面重定向,该重定向本应只是刷新页面,最后跟踪到一个引发.用javascript替换#:void(0);已修复。-我做了同样的事情,也解决了我的问题。

netskink 回复 17小时 前

谢谢你的简要解释。我很感激。这与后来冗长的回答很吻合。我对你的答案投了更高的票,因为它切中要害,但我喜欢另一个作进一步解释。我希望我能投两个票。

0
Tyler Treat 回答 17小时 前

它本质上是一个无处链接的链接(它只是在URL上添加了“#”)。它的使用有很多不同的原因。例如,如果您使用某种JavaScript/jQuery,并且不希望实际的HTML链接到任何地方。
它还用于页面定位,用于重定向到页面的不同部分。

Misko 回复 17小时 前

只需补充一点,它并不是指向任何地方的链接……在滚动页面上,它会自动将您滚动到顶部。

0
Alan Wells 回答 17小时 前

创建无序列表的目的通常是将其用作菜单,但li列表项为文本。因为列表li项目是文本,鼠标指针不是箭头,而是“I光标”。当某些东西可以点击时,用户习惯于用手指代替鼠标指针。使用定位标记a内部li标记使鼠标指针变为手指。用手指将列表用作菜单要好得多。

<ul id="menu">
   <li><a href="https://stackask.cn/go.php?go=Iw==" target="_blank">Menu Item 1</a></li>
   <li><a href="https://stackask.cn/go.php?go=Iw==" target="_blank">Menu Item 2</a></li>
   <li><a href="https://stackask.cn/go.php?go=Iw==" target="_blank">Menu Item 3</a></li>
   <li><a href="https://stackask.cn/go.php?go=Iw==" target="_blank">Menu Item 4</a></li>
</ul>

如果列表用于菜单,并且不需要链接,则不需要指定URL。但问题是如果你忽略了href属性中的文本<a>标记被视为文本,因此鼠标指针返回到I光标。I光标可能会让用户认为菜单项不可单击。因此,您仍然需要href,但您不需要指向任何地方的链接。
你可以用很多divp用于菜单列表的标记,但鼠标指针也将是它们的I光标。
您可以使用许多堆叠在一起的按钮来创建菜单列表,但列表似乎更可取。这可能就是为什么href="#"在列表标记内部的锚定标记中使用了无处指向。
您可以在CSS中设置指针样式,这是另一个选项。这个href="#"无处可去可能只是设置一些样式的懒散方式。