[英]Putting focus in Html.ActionLink menu
我的问题是:我想要一个菜单来清除以前访问的链接(再次将它们恢复为正常),但是将链接保持为当前访问的链接,如在CSS中访问a:。
我找到了一种方法。 但是问题是它不起作用! 这是我的代码:
< 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 !!");
});
});
我在css中的代码是:
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...
}
问题是我在menu-link-1中的代码无法正常工作。 我想删除ul和li css并向其中添加“ link-1-visited”类。
您对我该如何做有任何想法?
$("#menu-link-1").removeAttr("menu-link-1");
您想在这里做什么? menu-link-1不是li的属性,它是id。 如果您要添加和删除类,只需为其提供一个类。
试试这个...(开关this
对e.currentTarget
并通过e取入函数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 !!");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.