将焦点放在Html.ActionLink菜单中 [英] Putting focus in Html.ActionLink menu

问题描述

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

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 !!");
    });
});

我在css中的代码是：

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...
}

menu-link-1中的代码不工作。我想删除ul和li css并添加类link-1-visited。

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.

你有什么想法如何做？ / p>

Do you have any ideas about how can I do that?

推荐答案

试试这个...（将改为 c> e.currentTarget 并将e传递给函数 function（e））

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 !!");
  });
});

这篇关于将焦点放在Html.ActionLink菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！