Link :visited not work

Question

I have a class on the li called current-page. I want this class to move to every li and remove from the previous one when visited.

<div class="nav-collapse collapse">
    <ul class="nav pull-right">
        <li class="current-page">
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/Pages/StaticPage?pagePath=About%20Us">About Us</a>
        </li>
        <li>
            <a href="/Pages/StaticPage?pagePath=Investors">Investors</a>
        </li>
        <li>
            <a href="/Pages/ContantPage?pageId=1">Products</a>
        </li>
        <li>
            <a href="/Pages/ContantPage?pageId=2">Services</a>
        </li>
        <li>
            <a href="/Pages/ContantPage?pageId=3">Quality &amp; HSE</a>
        </li>
        <li>
            <a href="/Pages/PhotoGallery">Photo Gallery</a>
        </li>
        <li>
            <a href="/News/News">News</a>
        </li>
        <li>
            <a href="/Pages/StaticPage?pagePath=Contact%20Us">Contact Us</a>
        </li>
    </ul>
</div>

i try css not work too

.header ul.nav li a:active
{
     background-color: #EEEEEE !important;
    text-decoration: none !important;
}

and this too not work

.header ul.nav li a:visited
{
     background-color: #EEEEEE !important;
    text-decoration: none !important;
}

Isn't visited meant to style pages a user has been before? You probably want to go for :active? — berentrom, Feb 18 '14 at 07:32
It would be nice if you could be more descriptive on what you want to actually achieve — TheCodeDestroyer, Feb 18 '14 at 07:40
To check visited links, U can use some plugins for example this http://remysharp.com/2008/02/25/visited-plugin/ — user2167382, Feb 18 '14 at 07:46
Looks to me like you just want to know how to highlight the current page link in your menu. You can do it with JS (http://stackoverflow.com/questions/2955851/highlight-current-page-in-jquery), PHP (http://stackoverflow.com/questions/20959240/highlight-current-page-on-dynamic-navigation-php) or CSS (http://stackoverflow.com/questions/4626431/highlight-the-navigation-menu-for-the-current-page). — ralph.m, Feb 18 '14 at 07:55

simonzack · Answer 1 · 2014-02-18T07:42:11.547

2

:visited does not work using javascript. This is a security issue, using this has potential to log the user's history.

As for your css question, you don't have any elements with the header class.

edited Feb 18 '14 at 07:42

answered Feb 18 '14 at 07:32

simonzack

19,729
13
73
118

score 1 · Accepted Answer · answered Feb 18 '14 at 07:49

1

From @esviko answer, but some updates added

     $('.nav li').unbind('click').click(function(){
          $(this).siblings().removeClass('current-page');
          $(this).addClass('current-page');
          return false;
     });

answered Feb 18 '14 at 07:49

user2167382

346
1
3
14

score 0 · Answer 3 · answered Feb 18 '14 at 07:37

Your question is a bit ambigous but still...

If you want to decorate your visited menu links specially then you should add this to your CSS:

.nav a:visited{
   /* your style goes here */    
}

If you want to add some special class to visited link, then this is not possible via javascript due to security reasons.

If you want to add a class only to the page you are currently on then additional info about your page is needed about how could the page now under which menu item it is(URL pattern, some kind of request param or something else...).

esviko · Answer 4 · 2014-02-18T07:49:01.550

0

Try this: http://jsfiddle.net/Eq8TL/

$('.nav li').click(function(){
    $(this).siblings().removeClass('current-page');
    $(this).addClass('current-page');
});

edited Feb 18 '14 at 07:49

answered Feb 18 '14 at 07:42

esviko

250
1
3
15

yes its work but after page load its not work again how i keep it even after page load? – Aly_Elgahy Feb 18 '14 at 07:44
take a look at the jsfiddle example ... I guess you Need to define `.current-page a:link` and `.current-page a:visisted` – esviko Feb 18 '14 at 07:50

Link :visited not work

4 Answers4