将焦点放在Html.ActionLink菜单中

Putting focus in Html.ActionLink menu

本文关键字：ActionLink 菜单 Html 焦点      更新时间：2023-09-26

我的问题是：我想要一个菜单来清除以前访问过的链接（将它们再次恢复正常），但将链接保持为当前访问过的css中的：visited链接。

我已经找到了制作这个的方法。但问题是它不起作用！！这是我的代码：

< 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 !!");
  });
});
相关文章：