Question

我的网站有以下导航栏：

整个代码在in plnkr

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
</head>
<body>
<div class="scrollmenu w3-bar w3-border w3-card-4" id="myHeader">
<a style="float:left" href="index.html" class="w3-bar-item w3-mobile w3- 
border-right">Menu</a>
<a href="animationbasics1.html" class="w3-bar-item w3-mobile w3-border- 
right">Animation Basics1</a>    
<a href="animationbasics2.html" class="w3-bar-item w3-mobile w3-border- 
right">Animation Basics2</a>    
<a href="animationbasics3.html" class="w3-bar-item w3-mobile w3-border- 
right">Animation Basics3</a>    
</div>
</body>
</html>

我编写了这个活动函数，但它在plnkr中不起作用，因此活动元素的颜色会变为红色，因此用户知道他在哪里。

 $('a').each(function(){
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('active');
        curpage = $(this).attr("title");
    }
  });

我的问题是，我想知道编写一个函数，将已访问过的元素的颜色更改为淡蓝色或其他内容，以便用户知道他已经访问过此页面。

我感谢每一个建议或解决方案！

干杯！

Answer 1

为什么在jQuery中这样做？

你能用css吗？喜欢：

a:visited{
color: red;
}

Answer 2

正如其他人所建议的那样，:visited伪类可以完成这项任务。

a:visited {
  color:red;
}

我还添加了:hover（蓝色）和.active（绿色）状态。

这是一个有效的example。

注意：它无法在隐身模式下工作。

访问时更改导航栏中元素的颜色

2 个答案: