Как связать фокус после обновления страницы

Question

Моя проблема заключается в следующем: когда я нажимаю кнопку и обновляю страницу, я хочу, чтобы мое меню очищало предыдущие посещенные ссылки (снова поворачивая их в нормальное состояние), но сохраняя текущую посещаемость ссылка как: посещенная в css.

Я думаю, что это просто, но я начинаю в веб-программировании, поэтому мне нужна помощь. Я нашел способ сделать это. Но проблема в том, что она не работает! Это код, который у меня есть:

< ul id="menuTop"> 
    < li id="menu-link-1"> 
@Html.ActionLink("Home", "Index", null, null, new { id = "link-1-visited" }) < /li> 
< li id="menu-link-2"> 
@Html.ActionLink("Produtos", "Products", null, null, new { id = "link-2-visited" }) < /li> 
< li id="menu-link-3"> 
@Html.ActionLink("Fale Conosco", "ContactUs", null, null, new { id = "link-3-visited" }) < /li> 
< li id="menu-link-4"> 
@Html.ActionLink("Quem Somos", "AboutUs", null, null, new { id = "link-4-visited" }) < /li> 
< /ul> 

Это мои кнопки, и код, чтобы сделать их «посетили» в том, что:

$(document).ready(function() { 
$('#link-1-visited').click(function() { 
    $("#menu-link-1").removeAttr("menu-link-1"); 
    $(this).addClass('link-1-visited'); 
    window.alert("test 1 !!"); 
}); 

$('#link-2-visited').click(function() { 
    $(this).addClass('link-1-visited'); 
    window.alert("test 2 !!"); 
}); 

$('#link-3-visited').click(function() { 
    $(this).addClass('link-1-visited'); 
    window.alert("test 3 !!"); 
}); 

$('#link-4-visited').click(function() { 
    $(this).addClass('link-1-visited'); 
    window.alert("test 4 !!"); 
}); 
}); 

Мой код в КСС:

ul#menuTop li#menu-link-1 a { 
    background-image: url("../Content/images/Menu/menu-image-1-alt.png"); 
    margin-right: 1px; 
} 

ul#menuTop li#menu-link-1 a:hover { 
    background-image: url("../Content/images/Menu/menu-image-1-hover.png"); 
    margin-right: 1px; 
} 

.link-1-visited { 
    padding: 40px 20px 20px; 
    border-width: 3px; 
    border-bottom: 0px; 
    // more styles below... 
} 

ul#menuTop li a { 
    border: 3px #98fb98 solid; 
    border-bottom: 0px; 
    //more styles below... 
} 

ul#menuTop li a:hover { 
    padding: 40px 20px 20px; 
    border-width: 3px; 
    border-bottom: 0px; 
    border-style: solid; 
    //more styles below... 
} 

Проблема заключается в том, что мой код в меню-link-1 не работает. Я хочу удалить ul и li css и добавить к нему класс «link-1-visited».

Есть ли у вас какие-либо идеи о том, как я могу это сделать?

Answer 1

В основном вам нужно установить ваши ссылки, чтобы остаться один цвет в вашем CSS, так что ...

a, a:visited { 
    color: blue; 
} 

И тогда вы просто изменить цвет с помощью JQuery на событие щелчка:

$("a").click(function() { 
    ($this).css({"color":"white"}); 
}); 

Просто измените значения в соответствии с тем, что вы используете, и вы должны быть настроены.

За то, что вы пытаетесь сделать, смотрите в переменные сессии здесь: Java session variables