javascript - 导航按钮未重置为非事件状态

Question

我有一个主要和次要导航，当用户单击一个链接时，该链接的背景图像将更改为“事件”状态，并将所有其他链接重置为“非事件”。这适用于我的主要导航，但我的辅助导航没有重置，导致我的所有链接都处于事件状态。我的代码:
HTML

<nav id="menu">
<div id="container">
<a href="#" id="menu-link1">Link 1</a>
<a href="#" id="menu-link2">Link 2</a>
<a href="#" id="menu-link3">Link 3</a>
<a href="#" id="menu-link4">Link 4</a>
<a href="#" id="menu-link5">Link 5</a>
<a href="#" id="menu-link6">Link 6</a>
</div>
</nav><!--END MENU-->

<div id="upperContent-title">Welcome</div>
<div id="upperContent-body">
Welcome Text
</div>
<img id="upperContent-img" src="img/welcomeImg.png"/>
</div><!--END UPPER CONTENT-->

<nav id="middleNav">
<div id="middleContainer">
<a href="#" id="middleNavLinkCorner-link7">Link 7</a>
<a href="#" id="middleNavLink-link8">Link 8</a>
</div>
</nav><!--END MIDDLE NAV-->

CSS:

#menu{
    background-image:url(../menuBottom.jpg);
    background-repeat:repeat-x;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    margin-top:4px;
    width:1024px;
    height:25px;
    }
#container{
    position:absolute;
    margin-left:200px;
    margin-top:-3px;
    height:24px;
    }
nav a[id*="menu"]{
    background-image:url(../mainNav.png);
    background-repeat:no-repeat;
    display:inline-block;
    text-align:center;
    font-family:Arial,san-sarif;
    text-decoration:none;
    font-size:14px;
    color:#000;
    margin-left:-4px;
    padding-top:5px;
    margin-top:3px;
    padding-bottom:10px;
    width:129px;
    height:25px;
    }
#upperContent{
    background-image:url(../upperWelcome.jpg);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:1024px;
    height:306px;

    }
#upperContent-title{
    margin-left:60px;
    padding-top:40px;
    font-family:Arial,sans-serif;
    font-size:36px;
    color:#00853f;
    width:459px;
    }
#upperContent-body{
    margin-left:60px;
    padding-top:10px;
    font-family:Arial,sans-serif;
    font-size:14px;
    color:#000000;
    width:459px;
    }
#upperContent-img{
    position:absolute;
    margin-left:578px;
    margin-top:-183px;
    }
#middleNav{
    background-image:url(../middleNavBG.jpg);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:1024px;
    height:43px;
    }
#middleContainer{
    margin-left:57px;
    }
nav a[id*="middleNav"]{
    background-image:url(../middleNavRect.jpg);
    background-repeat:no-repeat;
    display:inline-block;
    text-align:center;
    font-family:Arial,san-sarif;
    text-decoration:none;
    font-size:14px;
    color:#FFF;
    margin-left:-4px;
    padding-top:8px;
    margin-top:3px;
    width:116px;
    height:37px;
    }
nav a[id*="middleNavCorner"]{
    background-image:url(../middleNavRound.png);
    background-repeat:no-repeat;
    display:inline-block;
    text-align:center;
    font-family:Arial,san-sarif;
    text-decoration:none;
    font-size:14px;
    color:#FFF;
    margin-left:-4px;
    padding-top:8px;
    margin-top:3px;
    width:116px;
    height:37px;
    }

JS:

//Initialize Document.ready
$(function(){
        //Navigation

            //Main Nav
            $("a[id*='menu']").on({
                click:function(e){
                        $("nav a[id*='menu']").css('background-image','url(urlHere/mainNav.png)');
                        $(this).css('background-image','url(urlHere/mainNavVisit.png)');
                    }
                });
            //Secondary Nav
            $("a[id*='middleNav']").on({
                click:function(e){
                        $("nav a[id*='middleNavLink']").css('background-image','url(urlHere/middleNavRect.jpg');
                        $(this).css('background-image','url(urlHere/middleNavRectVisit.jpg)');
                    }
            });
});//End Document.ready

JSFiddle: JSFiddle Of Intended Result

如有任何帮助，我们将不胜感激!

Answer 1

这个问题似乎出现在我的 .js 文档中。我从我的主导航复制了工作代码并将其用于我的辅助导航并且它似乎工作正常，试图找出最初问题的确切原因，但它似乎是某种定位或拼写错误。谢谢。