高亮当前访问链接：改变背景色与文字颜色

4星 · 超过85%的资源需积分: 9 128 浏览量更新于2024-09-26 收藏 1KB TXT 举报

"本资源主要介绍了如何通过CSS和JavaScript实现动态改变网页中链接的样式，使得被点击的链接在访问后能显示不同的背景色，以便用户识别当前访问的链接。" 在网页设计中，提供良好的用户体验是非常重要的。一个常见的方法是通过改变链接的颜色或背景色来突出显示用户当前访问的页面。这个资源提供了一个实现这一功能的例子，它结合了CSS和JavaScript来完成这个任务。首先，我们来看CSS部分。在`<style>`标签内，定义了不同状态下的链接样式： 1. `a:link` 和 `a:visited`：这两个伪类选择器分别应用于未访问过的链接和已被访问过的链接，它们都设置了无下划线装饰（`text-decoration:none;`）。 2. `a:hover`：当鼠标悬停在链接上时，链接颜色变为橙色（`color:orange;`），并添加下划线（`text-decoration:underline;`）。 3. `.subMenu` 类用于设置子菜单的样式，如浮动（`float:left;`）、顶部填充（`padding-top:2px;`）和宽度（`width:100%;`）。 4. `.subMenu li` 和 `.subMenu li a`：这些选择器用于设置子菜单列表项和链接的样式，如内联显示（`display:inline;` 和 `display:inline-block;`）、颜色、高度、行高、内边距和外边距等。 5. `.thisStyle` 类则是关键，当链接被选中时，应用此样式，赋予链接浅蓝色背景（`background:lightblue;`）和红色文本（`color:red;`）。接着，JavaScript部分通过`<script>`标签引入。`function foo(t)`函数会在链接被点击时执行。它首先获取所有`<a>`标签，并清空它们的`className`属性。然后，将点击的链接的`className`设置为`thisStyle`，使其应用之前定义的特殊样式。在HTML结构中，创建了一个`<ul>`列表，包含多个带有所需事件处理程序的链接。每个`<li>`内的`<a>`标签都有`onclick="foo(this);"`属性，这意味着当用户点击链接时，会调用`foo`函数并传入当前元素（即链接自身）作为参数。最后，注意到每个链接的`target`属性设置为`"frame"`，意味着它们将在名为`"frame"`的`<iframe>`中打开，而不是在当前窗口。这个示例提供了一种实用的方法，通过动态改变链接的样式来帮助用户跟踪他们在网站上的位置，从而提高导航的易用性。这个技术可以应用于各种网页布局和导航菜单，以提升用户体验。

<head>
<style type="text/css">
a:link,a:visited{text-decoration:none;}
a:hover{color:orange;text-decoration:underline;}

.subMenu{float:left;padding-top:2px;width:100%;}
.subMenu li{ display:inline;}
.subMenu li a{ display:inline-block; color:blue; height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.subMenu .thisStyle{background:lightblue;color:red;}

</style>
<script type="text/javascript">
function foo(t){
var objs = document.getElementsByTagName("a");
for(var i=0;i<objs.length;i++){
objs[i].className="";
}
t.className="thisStyle";
}
</script>
</head>
<body>
<ul class="subMenu">
<li><a href="www.baidu.com" target="frame" onclick="foo(this);" class="thisStyle">°Ù¶È</a></li>
<li><a href="www.google.com" target="frame" onclick="foo(this);">¹È¸è</a></li>
<li><a href="www.163.com" target="frame" onclick="foo(this);">163</a></li>
<li><a href="www.126.com" target="frame" onclick="foo(this);">126</a></li>
</ul>
<center><div ><iframe id="" name="frame" src="index.jsp" scrolling="auto" frameborder="0" align="middle" width="1100" height="500" ></iframe>
</div></center>

下载后可阅读完整内容，剩余1页未读，立即下载

sdauying

粉丝: 26
资源: 23

高亮当前访问链接：改变背景色与文字颜色

有用代码改变链接字体和颜色

css改变选中字体背景色和字体色

MT4渐变色颜色指标源码,改变MT4图表背景色为渐变色指标源码.zip

用html和css做静态侧边栏 被访问过的a标签背景色为8e8e8e

CSS中对于链接的默认、鼠标悬浮、已访问、激活各状态是如何定义的

运用列表、超链接制作导航，对列表、超链接进行CSS3设置，如字 体、字体大小、颜色，背景色，超链接访问前，鼠标经过等效果。

web制作页面导航条，每个导航项目可以点击（链接到某个页面），当鼠标悬停时背景和文字颜色都将发生改变。

链接标签介绍?锚链接设着介绍? 超链接伪类设置介绍?

html active用处

CSS设置导航栏跳转链接

最新资源

用html和css做静态侧边栏被访问过的a标签背景色为8e8e8e

运用列表、超链接制作导航，对列表、超链接进行CSS3设置，如字体、字体大小、颜色，背景色，超链接访问前，鼠标经过等效果。