Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS.
Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I have so far:
< 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("Products", "Products", null, null, new { id = "link-2-visited" })
</li>
< li id="menu-link-3">
@Html.ActionLink("Contact Us", "ContactUs", null, null, new { id = "link-3-visited" })
</li>
< li id="menu-link-4">
@Html.ActionLink("About Us", "AboutUs", null, null, new { id = "link-4-visited" })
</li>
< /ul>
Here is the JavaScript code that should make the buttons "visited":
$(document).ready(function() {
$('#link-1-visited').click(function() {
$("#menu-link-1").removeAttr("menu-link-1");
$(this).addClass('link-1-visited');
window.alert("test 1 !!");
});
// Code for other links...
});
And here is the relevant CSS:
ul#menuTop li#menu-link-1 a {
background-image: url("../Content/images/Menu/menu-image-1-alt.png");
margin-right: 1px;
}
// More CSS styles...
.link-1-visited {
padding: 40px 20px 20px;
border-width: 3px;
border-bottom: 0px;
border-style: solid;
// more styles below...
}
// More general CSS styles...
The issue lies with the code for menu-link-1. It is not working as expected. Ideally, I would like to remove the ul and li CSS and instead add the class "link-1-visited" to it.
If you have any suggestions on how I can accomplish this, please let me know!