javascript - 如何在 css/html/jquery 中更改焦点菜单

Question

我的问题很简单：我想做一个像http://edition.cnn.com/这样的菜单

当我单击菜单中的一个按钮时，我希望它获得焦点，而其余按钮则失去焦点。这个问题似乎很简单，但我已经尝试了不同的方法，但都没有奏效。你能帮助我吗？我怎样才能做到这一点？

其他方式：将焦点放在 Html.ActionLink 菜单中

我希望当我单击一个按钮时，当页面刷新时它获得焦点，而其他按钮保持正常，或者如果选择了另一个按钮，则将其正常。

感谢您的任何建议。

Answer 1

您的问题非常模糊，所以虽然我们都猜测您的意思可能类似于以下内容：

html:

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</nav>

Javascript（您标记了 jquery）：

$(function() {
    $("nav ul li").click(function() {
        $("nav ul li").not(this).removeClass("active");
        $(this).addClass("active");
    });
});

CSS：

nav ul { list-style-type: none; }
nav ul li { float: left; cursor: pointer; padding: 10px; background-color: #eee; }
nav ul li.active { background-color: red; color: white; }
nav ul li:hover:not(.active) { background-color: #ccc; }

在这里查看小提琴：http: //jsfiddle.net/6UdkD/1/

Answer 2

我可能是错的......但我认为这就是你的意思......

如果您的导航菜单位于如下列表中：

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

您可以将样式应用于这些链接，如下所示：

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */ 

或者如果你想改变整个列表项的样式，你可以这样做：

li {
    background-color: green;
}

查看W3 Schools以获取有关样式链接的更多教程。

Answer 3

小提琴演示

希望这对你有帮助！！！

$(function(){
    var jqMenu = $("#barre_menu").menu();

    $("#focus1").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#azer"));
        }
        catch(exc){
            alert("Exception caught : "+exc);
        }
    });
    $("#focus2").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#qsdf"));
        }
        catch(exc){
            alert("Exception caught : "+exc);
        }
    });
    $("#focus2").click(function(){
        try{
            jqMenu.menu( "focus", null, jqMenu.find("#wxcv"));
        }
        catch(exc){
            alert("Exception caught : "+exc);
        }
    });
});