如何更改焦点:在菜单中访问过

时间:2013-07-14 22:02:45

标签: javascript jquery css css3

我是巴西人,所以,首先,对于任何英语错误感到抱歉。

我的问题是:我想要一个清除以前访问过的链接的菜单(再次将它们恢复正常),但保持链接当前访问的链接为:在css中访问。

我找到了一种方法来做到这一点。但问题是它不起作用!!这是我的代码:

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

问题是我在menu-link-1中的代码无效。我想删除ul和li css并向其添加“link-1-visited”类。

您对我该怎么做有什么想法吗?

1 个答案:

答案 0 :(得分:0)

很遗憾无法从 JavaScript 访问它,您只能显示它..

浏览器指示仅基于其知道的数据库条目访问了一个链接,然后使用特定浏览器配置中指定的默认颜色。

如果您希望结果仅用于视觉呈现,那么最快的方法是使用CSS计数器..

CSS:

body{
    counter-reset: visited_counter;
}

a:visited{
    counter-increment: visited_counter;
}

#results:before{
    content:counter(visited_counter);
}

这会在ID为'results'的元素之前添加已访问链接的数量。

这个 jQuery解决方案虽然效果很好。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var normalColor = $('a:link').css('color');
            $('a:visited').css('color', normalColor);
        });
    </script>