Javascript Cookie-如果用户已单击，则添加类

我有一个链接列表，我想添加一个类，当用户已经点击了该链接，给它一些样式，所以他们知道他们已经看过这个链接。我正在使用cookies.js插件来帮助实现这一点

JSFIDLE的一个示例如下：-

$（文档）.ready（函数（）{
var index=Cookies.get（'active'）；
$（“.clearfix”）.find（'a'）.eq（index）.addClass（'active'）；
$（'.clearfix'）。在（'click'，'li a'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'active'）；
Cookies.set（'active'，$（'.clearfix a'）。索引（this））；
});
});

nav li a.active
{
边框底部：3px实心#fd9625；
}

您可以使用

已访问的

CSS选择器，试试我的例子：

a：已访问{
颜色：红色；
}

您可以使用

已访问的

CSS选择器，试试我的例子：

a：已访问{
颜色：红色；
}

因为每次单击链接时，都会覆盖上一次单击

$(document).ready(function () {

  $(".clearfix a").each(function () {
    if (Cookies.get($(this).attr("data-link"))) {
        $(this).addClass('active');
    }
  });

  $('.clearfix').on('click', 'li a', function (e) {
    e.preventDefault();
    $(this).addClass('active');
    Cookies.set('link-' + $('.clearfix a').index(this), 'active');
  });
});

<ul class="clearfix">
    <li><a runat="server" data-link="link-0" href="#">Home</a></li>
    <li><a runat="server" data-link="link-2" href="#">About Us</a></li>
    <li><a runat="server" data-link="link-1" href="#">Contact Us</a></li>
 <ul>

 a.active {
    color:red !important;
  }

$（文档）.ready（函数（）{
$（“.clearfix a”）。每个（函数（）{
if（Cookies.get（$（this.attr（“数据链接”））{
$（this.addClass（'active'）；
}
});
$（'.clearfix'）。在（'click'，'li a'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'active'）；
Cookies.set（'link-'+$（'.clearfix a'）。索引（this），'active'）；
});
});





a、 活跃的{
颜色：红色！重要；
}

因为每次单击链接时，都会覆盖上一次单击

$(document).ready(function () {

  $(".clearfix a").each(function () {
    if (Cookies.get($(this).attr("data-link"))) {
        $(this).addClass('active');
    }
  });

  $('.clearfix').on('click', 'li a', function (e) {
    e.preventDefault();
    $(this).addClass('active');
    Cookies.set('link-' + $('.clearfix a').index(this), 'active');
  });
});

<ul class="clearfix">
    <li><a runat="server" data-link="link-0" href="#">Home</a></li>
    <li><a runat="server" data-link="link-2" href="#">About Us</a></li>
    <li><a runat="server" data-link="link-1" href="#">Contact Us</a></li>
 <ul>

 a.active {
    color:red !important;
  }

$（文档）.ready（函数（）{
$（“.clearfix a”）。每个（函数（）{
if（Cookies.get（$（this.attr（“数据链接”））{
$（this.addClass（'active'）；
}
});
$（'.clearfix'）。在（'click'，'li a'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'active'）；
Cookies.set（'link-'+$（'.clearfix a'）。索引（this），'active'）；
});
});





a、 活跃的{
颜色：红色！重要；
}

此操作不需要Cookies。您可以使用本地存储来实现这一点。添加数据属性以给它一个唯一的标识符，我们也将为类使用这个标识符

HTML文件：

<nav>
    <ul class="clearfix">
        <li><a href="#" data-id="home">Home</a></li>
        <li><a href="#" data-id="about_us">About Us</a></li>
        <li><a  href="#" data-id="contact_us">Contact Us</a></li>
    </ul>  
</nav>

$(document).ready(function () {

    $('.clearfix > li a').on('click', function (e) {
        let link = e.target.getAttribute('data-id');
            localStorage.setItem(link,link);
        $(this).addClass(link);
    });
});

.home{
    color:orange;
}
.about_us{
    color:orange;
}

.contact_us{

    color:orange;
}

CSS:

<nav>
    <ul class="clearfix">
        <li><a href="#" data-id="home">Home</a></li>
        <li><a href="#" data-id="about_us">About Us</a></li>
        <li><a  href="#" data-id="contact_us">Contact Us</a></li>
    </ul>  
</nav>

$(document).ready(function () {

    $('.clearfix > li a').on('click', function (e) {
        let link = e.target.getAttribute('data-id');
            localStorage.setItem(link,link);
        $(this).addClass(link);
    });
});

.home{
    color:orange;
}
.about_us{
    color:orange;
}

.contact_us{

    color:orange;
}

---

希望有帮助：）

此操作不需要Cookies。您可以使用本地存储来实现这一点。添加数据属性以给它一个唯一的标识符，我们也将为类使用这个标识符

HTML文件：

<nav>
    <ul class="clearfix">
        <li><a href="#" data-id="home">Home</a></li>
        <li><a href="#" data-id="about_us">About Us</a></li>
        <li><a  href="#" data-id="contact_us">Contact Us</a></li>
    </ul>  
</nav>

$(document).ready(function () {

    $('.clearfix > li a').on('click', function (e) {
        let link = e.target.getAttribute('data-id');
            localStorage.setItem(link,link);
        $(this).addClass(link);
    });
});

.home{
    color:orange;
}
.about_us{
    color:orange;
}

.contact_us{

    color:orange;
}

CSS:

<nav>
    <ul class="clearfix">
        <li><a href="#" data-id="home">Home</a></li>
        <li><a href="#" data-id="about_us">About Us</a></li>
        <li><a  href="#" data-id="contact_us">Contact Us</a></li>
    </ul>  
</nav>

$(document).ready(function () {

    $('.clearfix > li a').on('click', function (e) {
        let link = e.target.getAttribute('data-id');
            localStorage.setItem(link,link);
        $(this).addClass(link);
    });
});

.home{
    color:orange;
}
.about_us{
    color:orange;
}

.contact_us{

    color:orange;
}

希望有帮助：）

也许：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
    nav li a.active{
        background: red;
    }
</style>
</head>
<body>
  <nav>
      <ul class="clearfix">
          <li>
             <a runat="server" id="one" href="#" onclick="changeColor('one')">Home</a> 
          </li>
          <li>
             <a runat="server" id="two" href="#" onclick="changeColor('two')">About 
             Us</a>
          </li>
          <li>
             <a runat="server" id="three" href="#" 
             onclick="changeColor('three')">Contact Us</a>
          </li>
    </ul>
 </nav>
 <script>
        function changeColor(id){
            if (document.querySelector(`#${id}`).style.background === "red"){
                document.querySelector(`#${id}`).style.background = "white";
                // document.querySelector(this).style.background === "white";
            }else{
                // document.querySelector(this).style.background === "red";
                document.querySelector(`#${id}`).style.background = "red";
            }
        }
  </script>
</body>
</html>

样品
导航李a{
背景：红色；
}








函数更改颜色（id）{
if（document.querySelector（`${id}`）.style.background==“red”）{
document.querySelector（`${id}`）style.background=“white”；
//document.querySelector（this.style.background==“白色”；
}否则{
//document.querySelector（this.style.background==“红色”；
document.querySelector（`${id}`）style.background=“red”；
}
}

也许：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
    nav li a.active{
        background: red;
    }
</style>
</head>
<body>
  <nav>
      <ul class="clearfix">
          <li>
             <a runat="server" id="one" href="#" onclick="changeColor('one')">Home</a> 
          </li>
          <li>
             <a runat="server" id="two" href="#" onclick="changeColor('two')">About 
             Us</a>
          </li>
          <li>
             <a runat="server" id="three" href="#" 
             onclick="changeColor('three')">Contact Us</a>
          </li>
    </ul>
 </nav>
 <script>
        function changeColor(id){
            if (document.querySelector(`#${id}`).style.background === "red"){
                document.querySelector(`#${id}`).style.background = "white";
                // document.querySelector(this).style.background === "white";
            }else{
                // document.querySelector(this).style.background === "red";
                document.querySelector(`#${id}`).style.background = "red";
            }
        }
  </script>
</body>
</html>

样品
导航李a{
背景：红色；
}








函数更改颜色（id）{
if（document.querySelector（`${id}`）.style.background==“red”）{
document.querySelector（`${id}`）style.background=“white”；
//document.querySelector（this.style.background==“白色”；
}否则{
//document.querySelector（this.style.background==“红色”；
document.querySelector（`${id}`）style.background=“red”；
}
}

出现了什么问题？为什么不使用

a:visted

？@MrKhan刷新时，它不会记住所有单击的链接，它似乎正在删除某些内容设置cookie时，您将用当前单击的链接覆盖上一次单击的链接的索引。要确保抓取所有单击的链接，请将一个数组字符串化为单击或类似操作时的manipulate。记得要添加清理机制/失效日期。我给你做了一个片段。您需要始终使用HTTPS版本-唉，由于沙盒问题，脚本没有作为片段运行。这似乎是问题所在？为什么不使用

a:visted

？@MrKhan刷新时，它不会记住所有单击的链接，它似乎正在删除某些内容设置cookie时，您将用当前单击的链接覆盖上一个单击链接的索引。要确保抓取所有单击的链接，请将一个数组字符串化为单击或类似操作时的manipulate。记得要添加清理机制/失效日期。我给你做了一个片段。您需要始终使用HTTPS版本-唉，由于沙盒，脚本不会作为代码段运行