给正在访问的链接加背景色，改变链接颜色

### 给正在访问的链接加背景色，改变链接颜色 #### 背景与目标 在网页设计中，为了提高用户体验并使用户更清楚地识别当前所处的位置，经常需要对正在访问的链接进行视觉上的突出显示。例如，可以通过改变链接的颜色或添加背景色等方式来实现这一目的。本文将详细介绍如何利用HTML、CSS以及JavaScript技术实现这一功能。 #### 实现原理 要实现“给正在访问的链接加背景色”的功能，主要涉及以下几个方面的技术应用： 1. **HTML**：定义链接结构。 2. **CSS**：定义链接样式。 3. **JavaScript**：动态修改链接样式。 #### HTML结构 我们需要通过HTML定义链接。在给定的部分内容中，链接被放置在一个`<ul>`列表中，并且每个链接都包含一个`<a>`标签。这些链接指向不同的网址，并且当点击时会触发特定的行为。 ```html <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> ``` 这里的`target="frame"`属性表示链接内容将在指定的`<iframe>`中打开。`onclick="foo(this);"`则是在点击链接时调用名为`foo`的JavaScript函数，并传入当前点击的链接元素作为参数。 #### CSS样式 接下来是定义链接的样式。CSS用于控制链接的外观，包括未访问、已访问、悬停和活动状态的不同样式。 ```css a:link, a:visited { text-decoration: none; } a:hover { color: orange; text-decoration: underline; } .subMenu .thisStyle { background: lightblue; color: red; } ``` 这里的关键是`.thisStyle`类，它会在链接被点击时应用，从而改变链接的背景色和文字颜色。 #### JavaScript交互 最后是使用JavaScript来处理点击事件，实现动态样式更改。 ```javascript function foo(t) { var objs = document.getElementsByTagName("a"); for (var i = 0; i < objs.length; i++) { objs[i].className = ""; } t.className = "thisStyle"; } ``` 这段代码的核心逻辑是遍历所有的`<a>`标签，清除它们的`class`属性，然后将点击的链接元素的`class`设置为`thisStyle`，从而应用相应的样式。 #### 总结 通过结合使用HTML、CSS和JavaScript，我们可以轻松实现在点击链接时给链接加上背景色，而在点击其他链接时恢复原样，以此来区分用户当前访问的是哪个链接。这种方法不仅提升了用户体验，还使得网站导航更加直观易懂。当然，随着前端技术的发展，现在还可以采用如React、Vue等现代框架来实现类似的功能，让页面更加动态和交互性更强。