如何使用javascript动态更改访问过的链接颜色?

时间:2022-11-21 12:39:12

I created dynamic list(list with hyperlink) using jquery.when I click that link fo rthe first time it will go to the next page. I used the cookie for save the index of link value while I am clicking that link.Again run that application get the saved index value from cookie in onload.Using that value change the color that particular link. Now I want to I will run that application again that link is displayed in red color and the other links(unvisited) are displayed in blue color. How to do this?

我使用jquery创建了动态列表(带有超链接的列表)。当我第一次点击该链接时,它将转到下一页。我点击该链接时使用cookie来保存链接值的索引。再运行该应用程序从onload中的cookie获取保存的索引值。使用该值更改特定链接的颜色。现在我想再次运行该应用程序,链接以红色显示,其他链接(未访问)以蓝色显示。这该怎么做?

   $(".sidemenu li ").click(function() {  
              var index = $('li').index(this); 
             // alert(index);
              checkCookie(index);
            // saveid(index);
              });

    }   

    function checkCookie(index)
    {

     var linkindexvalue=index;
     // alert(linkindexvalue);
      setCookie("indexvalue",linkindexvalue,365);


    }

    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + value;
    alert(document.cookie);
    }
    $(document).ready(function(){

    var list=getCookie("indexvalue");
    if(list=='1'){
    alert(" ");

     $(".sidemenu li").css("background-color","red");

    }

  });

    function getCookie(c_name)
    {
    alert("hj");
    var value = "";
    var DocumentCookie = " " + document.cookie + ";";
    var CookieSearchStr = " " + c_name + "=";
    var CookieStartPosition = DocumentCookie.indexOf(CookieSearchStr);
    var CookieEndPosition;

    if (CookieStartPosition != -1) {
    CookieStartPosition += CookieSearchStr.length;
    CookieEndPosition = DocumentCookie.indexOf(";", CookieStartPosition);
    value = unescape(DocumentCookie.substring(CookieStartPosition, CookieEndPosition));
    }

    return value;

    }  

please guide me.

请指导我。

Thanks in advance

提前致谢

2 个解决方案

#1


0  

There's actually the jQuery Visited plugin that let you get the visited links in your page.

实际上有jQuery Visited插件可以让你获得页面中的访问链接。

Once included, you can select the links and attach a class with the new colour:

包含后,您可以选择链接并使用新颜色附加类:

$('.sidemenu li a').visited().addClass('visited');

Notice that in this case you have to add an <a> inside your <li>s, since I don't think the visited feature it's strictly related to links on a anchor, not clicks on a list item.

请注意,在这种情况下,您必须在

  • 中添加,因为我不认为访问的功能与锚点上的链接严格相关,而不是点击列表项目。

  • If on the contrary you need to go for the cookies options, give me some time to check your code! :)

    如果相反,您需要选择cookie选项,请给我一些时间来检查您的代码! :)

    #2


    1  

    use css :visited tag. Else if you want to do so by jquery without any plugin then see my implementation on jsfiddle http://jsfiddle.net/JjMAX/1/.

    使用css:visited标签。如果你想通过没有任何插件的jquery这样做,那么请参阅jsfiddle http://jsfiddle.net/JjMAX/1/上的实现。

    #1


    0  

    There's actually the jQuery Visited plugin that let you get the visited links in your page.

    实际上有jQuery Visited插件可以让你获得页面中的访问链接。

    Once included, you can select the links and attach a class with the new colour:

    包含后,您可以选择链接并使用新颜色附加类:

    $('.sidemenu li a').visited().addClass('visited');
    

    Notice that in this case you have to add an <a> inside your <li>s, since I don't think the visited feature it's strictly related to links on a anchor, not clicks on a list item.

    请注意,在这种情况下,您必须在

  • 中添加,因为我不认为访问的功能与锚点上的链接严格相关,而不是点击列表项目。

  • If on the contrary you need to go for the cookies options, give me some time to check your code! :)

    如果相反,您需要选择cookie选项,请给我一些时间来检查您的代码! :)

    #2


    1  

    use css :visited tag. Else if you want to do so by jquery without any plugin then see my implementation on jsfiddle http://jsfiddle.net/JjMAX/1/.

    使用css:visited标签。如果你想通过没有任何插件的jquery这样做,那么请参阅jsfiddle http://jsfiddle.net/JjMAX/1/上的实现。