My problem is this: I want a menu that clear the previous visited links (turning them to normal again), but keeping the link the current visited link as a:visited in css.
I have found a way to make this. But the problem is it is not working!! This is the code that I have:
< 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>
This is my buttons, and the code to make them "visited" is that:
$(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 !!");
});
});
My code in css is:
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;
border-style: solid;
// 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...
}
The problem is my code in menu-link-1 is not working. I want to remove the ul and li css and add class "link-1-visited" to it.
Do you have any ideas about how can I do that?
$("#menu-link-1").removeAttr("menu-link-1");
What are you trying to do here? menu-link-1 is not an attribute of the li, it is the id. If you are trying to add and remove classes, just give it a class.
try this... (switching this
to e.currentTarget
and passing e into function function(e)
)
$(document).ready(function() {
$('#link-1-visited').click(function(e)
{
$("#menu-link-1").removeAttr("id","menu-link-1");
$(e.currentTarget).addClass('link-1-visited');
window.alert("test 1 !!");
});
$('#link-2-visited').click(function(e)
{
$(e.currentTarget).addClass('link-1-visited');
window.alert("test 2 !!");
});
$('#link-3-visited').click(function(e)
{
$(e.currentTarget).addClass('link-1-visited');
window.alert("test 3 !!");
});
$('#link-4-visited').click(function(e)
{
$(e.currentTarget).addClass('link-1-visited');
window.alert("test 4 !!");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.