html超链接,点击后文字变色,再点击下一项时,已点过的颜色怎么再恢复原来颜色?怎么写代码?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html超链接,点击后文字变色,再点击下一项时,已点过的颜色怎么再恢复原来颜色?怎么写代码?相关的知识,希望对你有一定的参考价值。

使用超链接a标签的伪类,
a:link color: #FF0000 /* 未访问的链接 */
a:visited color: #00FF00 /* 已访问的链接 */
a:hover color: #FF00FF /* 鼠标移动到链接上 */
a:active color: #0000FF /* 选定的链接 */
你只需要使用第一个和第二个,就可以了,设置的颜色一样就可以了。追问

想把未访问和已访问的区别开,比如有两项文字,点了一个由黑色变成红色了,再点下一个文字时,让第一个的红色再变成黑色,第二个由黑色边红色

追答

这个是js,你可以下一个js手册,里面有这样的效果。

参考技术A div+css,如果想刷新后还有就用php程序写 参考技术B 你说的是HOVER 吗?追问

嗯是

追答

你是说当鼠标移在一个超链接上的时候是一种颜色,鼠标离开后又恢复字体本来的颜色是吗?

参考技术C 用JS可以写的啊

如何防止超链接点击后重定向?

【中文标题】如何防止超链接点击后重定向?【英文标题】:How to prevent redirect after hyperlink click? 【发布时间】:2014-12-15 22:41:37 【问题描述】:

我有以下 html+ js 代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<a href="#" id=key onclick="func(0)">foo</a>

</body>

<script type="text/javascript">
function func(k)
    alert(1);
    return false;
   
</script>
</html>

您能解释一下如何重构以下代码,在单击 href 代码 func 后执行但 # 未添加到 URL 并且不应重新加载页面?

【问题讨论】:

***.com/questions/1265887/… 这可能就是你要找的东西 【参考方案1】:

使用javascript:void(0); 代替#,如下所示:

<a href="javascript:void(0);" id=key onclick="func(0)">foo</a>

【讨论】:

【参考方案2】:

您可以简单地删除 href 属性:

<a id='key' onclick="func(0)">foo</a>

【讨论】:

那是有效的 HTML 吗?我认为a 标签必须有href 属性。 在另一张纸条上,我认为这个会在锚标签上使用cursor:text...我知道它可以在之后用css设置,只是说... 似乎在 HTML4 strict 和 HTML5 中验证良好。 @webeno 好点 - 您可以使用 cursor: pointer 使 a 标签再次使用指针光标。【参考方案3】:

改成:

                            vvvvvvv
<a href="#" id=key onclick="return func(0)">foo</a>

【讨论】:

我个人最喜欢这个 ;) 你知道为什么这个会阻止# 出现在地址行吗? @webeno 当您在点击处理程序中返回 false 时,它​​会阻止默认操作发生,在超链接的情况下:转到 url(在这种情况下为 # 很好奇为什么 return function 实际上意味着默认返回 false 然后运行该函数,这是我不知道它是如何工作的简写... 因为func(0) 返回false 所以onlick="func(0)"onclick="false" 相同,onclick="return func(0)"onclick="return false" 相同 @webeno 这样想:fn = function() 1 ; alert(fn()) vs fn = function() return 1 ; alert(fn())【参考方案4】:

我想你忘记了“key”中的引号

&lt;a href="#" id="key" onclick="func(0)"&gt;foo&lt;/a&gt;

【讨论】:

不要认为添加引号会从链接中删除哈希...另一方面,这在 HTML 中是允许的,应该不是问题,在此处阅读更多内容(未引用属性值):mathiasbynens.be/notes/unquoted-attribute-values 直接链接到我在之前评论中引用的网站上引用的部分:html.spec.whatwg.org/multipage/…【参考方案5】:

为了在语义上更正确,我将使用带有以下 onclick 的按钮:

<button id=key onclick="return func(0)">foo</button>

这样就无需修改 e.preventDefault / return false。

【讨论】:

按钮看起来不像链接 好吧,a 标签不适合以这种方式使用。如果您想花一点额外的时间来设计按钮,这取决于您。这很容易用 CSS 修复,这意味着你的标记是有效的,你不需要制作黑客来让浏览器按照你想要的方式工作。由你决定。 哦,顺便说一句,我不喜欢对我的回答投反对票,因为你懒得遵循网络最佳实践。 如果你能提供这些线路,我会支持你回答 这不是您原始问题的一部分,我的回答以行业最佳实践回答了您的问题。您至少可以做的就是取消反对票。【参考方案6】:

在func里面,你可以这样做:

func(event) event.preventDefault(); /* More code here! */ 

preventDefault 将阻止重定向,在该行之后,您可以添加任何您想要的逻辑。

但是,如果您不想重定向,建议使用button 而不是a

【讨论】:

以上是关于html超链接,点击后文字变色,再点击下一项时,已点过的颜色怎么再恢复原来颜色?怎么写代码?的主要内容,如果未能解决你的问题,请参考以下文章

html点击超链接,展开列表?

html点击变色再点击变回来

vue点击超链接后变色

HTML,点击页面上一个超链接更换原有图片等效果

jsp如何显示点击超链接后的图片

打开网页后 自动点击 iframe 内 超链接 ,超链接仍然显示在 iframe内