css怎么实现通过看导航的值最佳再哪个页面
时间: 2024-01-21 17:17:20 浏览: 16
如果你的导航条是基于HTML和CSS构建的,那么你可以通过在当前页面对应的导航链接上添加一个class来实现高亮显示。具体来说,你可以使用JavaScript或jQuery来检测当前页面的URL,然后将相应的导航链接设置为active类。例如:
HTML代码:
```
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">我们的服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
```
JavaScript代码:
```
// 获取当前页面的URL
var currentUrl = window.location.href;
// 获取所有导航链接
var navLinks = document.querySelectorAll('nav ul li a');
// 遍历导航链接
for(var i=0; i<navLinks.length; i++) {
// 检查链接的URL是否与当前页面的URL匹配
if(navLinks[i].href === currentUrl) {
// 将当前链接设置为active类
navLinks[i].classList.add('active');
}
}
```
CSS代码:
```
nav ul li a.active {
color: #ff0000; /* 高亮显示的颜色 */
}
```
这样,就可以根据当前页面的URL在导航条上高亮显示相应的链接了。