导航按钮未重置为非活动状态
Navigational Buttons not resetting to inactive state
我有一个主导航和二级导航,当用户点击一个链接时,该链接的背景图像将变为"active"状态,并将所有其他链接重置为"inactive"。这对我的主要导航工作得很好,但我的次要导航没有重置,导致我的所有链接都处于活动状态。我的代码:
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 expected Result
任何帮助将非常感激,谢谢!
这个问题似乎已经在我的。js文档。我从我的主要导航复制了工作代码,并将其用于我的次要导航,它似乎工作得很好,试图隔离最初问题的确切原因,但它似乎是某种类型的目标或拼写错误。谢谢。
相关文章:
- 按钮处于活动状态,焦点无法在Mac FireFox上工作
- 如何使按钮具有 :活动状态 1 秒
- 创建一个复选框按钮的散列,这些按钮在单击时在Twitter Bootstrap Button组中处于活动状态
- Javascript/JQuery样式-#按钮:点击全屏后悬停保持活动状态
- Twitter引导程序:删除/切换类似复选框的按钮组的活动状态
- Javascript:在表单中输入数据时,提交按钮不处于活动状态
- 仅当单击其他按钮时,才使按钮处于非活动状态
- 如果菜单处于活动状态或非活动状态,则切换图标的类.多级按钮菜单
- 在鼠标(指针设备)未处于活动状态(不移动)时隐藏按钮
- 检查按钮是否处于活动状态
- 按钮在重新添加到 DOM 时保持活动状态
- 在按下键盘按钮时将链接更改为 :活动状态
- jQuery UI 按钮 - 保持活动状态,忽略悬停状态
- 按钮启动为活动状态
- jQuery在Bootstrap切换按钮类处于活动状态时执行某些操作
- JQuery验证禁用按钮,直到所有字段都处于活动状态,但它不应该在每次按键时都显示错误
- 如何使所选导航按钮保持活动状态
- 如何让css按钮在点击后保持活动状态
- 显示活动状态的引导按钮不能正常工作
- jquery按钮处于活动取消活动状态