Question

我的问题很简单：我想制作一个像http://edition.cnn.com/

这样的菜单

当我点击菜单中的一个按钮时，我希望它获得焦点，其余的则失去它。这个问题似乎很容易，但我已经尝试了不同的方式，但没有一个工作。你能帮助我吗？我该怎么做？

其他方式：Putting focus in Html.ActionLink menu

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

感谢任何消息。

Answer 1

我可能错了......但我认为这就是你所得到的......

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

<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 2

FIDDLE DEMO

希望这可以帮助你!!!

$(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);
        }
    });
});

Answer 3

你的问题很模糊，所以虽然我们都猜测你的意思可能如下：

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/

如何在css / html / jquery中进行更改焦点菜单

3 个答案: