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

4星 · 超过85%的资源需积分: 9 90 浏览量更新于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

javascript实现随机生成DIV背景色

调整CSS类型的顺序改变链接翻滚

css类库(初始化样式 字体样式 公用空隙 全局链接颜色 字体颜色属性 其他属性 )

jQuery cookie保存背景颜色、字体颜色和字体特效代码

支持背景色为渐变模式且可自动切换的jQuery插件.zip

变换链接色和底色.rar

div设置宽度背景颜色js特效代码

最新资源

css类库(初始化样式字体样式公用空隙全局链接颜色字体颜色属性其他属性 )