切换菜单处于活动状态
Toggle menu active
嘿,我正在做一个菜单,我希望当我点击该项目时进入活动位置,然后当点击另一个项目时,它会变为最近点击的活动状态,并从上一个项目中删除状态,这就是我正在做的,但不起作用。。。如果有人能帮我,我将不胜感激。
HTML
<div id="nav-pPal">
<ul class="nav-Ppal">
<li><a class="btns-nav" id="0" href="#block-intro">01</a></li>
<li><a class="btns-nav" id="1" href="#block-pq-zolfunza">02</a></li>
<li><a class="btns-nav" id="2" href="#block-modulos-zolfunza">03</a></li>
<li><a class="btns-nav" id="3" href="#block-seguridad">04</a></li>
<li><a class="btns-nav" id="4" href="#block-desarrollo">05</a></li>
<li><a class="btns-nav" id="5" href="#block-nuestra-ubic">06</a></li>
<li><a class="btns-nav" id="6" href="#block-noticias">07</a></li>
<li><a class="btns-nav" id="7" href="#block-preguntas">08</a></li>
<li><a class="btns-nav" id="8" href="#block-contacto">09</a></li>
</ul>
</div>
CSS
.nav-Ppal li a {
width: 30px;
height: 22px;
padding-top:8px;
text-align:center;
display:block;
text-decoration:none;
color:#FFF;
cursor:pointer;
background-color: #000;
color: #FFF;
opacity: 1;
-moz-opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
cursor:pointer;
font-family: 'lucida_sans_unicoderegular', Helvetica, Arial, sans-serif;
font-size:11px;
}
.nav-Ppal li a:hover {
background-color: #f7941e;
color: #FFF;
display:block;
text-decoration:none;
cursor:pointer;
}
.nav-Ppal-active{
background: white;
color: black;
}
jQuery
$(".nav-Ppal li a").on("click", checkTarget);
function checkTarget(){
/*$(".nav-Ppal li a").not(this).removeClass(".nav-Ppal_active");*/
$(".nav-Ppal li a").addClass("nav-Ppal-active");
console.log("click");
}
$(function() {
$(".nav-Ppal li a").on("click", function() {
$(".nav-Ppal li a").removeClass('nav-Ppal-active');
$(this).addClass("nav-Ppal-active");
});
});
这就是你想要做的
更改CSS:
.nav-Ppal-active{
background: white;
color: black;
}
您的特殊性正在被默认类覆盖。
工作链接:http://jsfiddle.net/barrychapman/epaE3/3/
这类似于我最近提出的一个解决方案,该解决方案使用"hashchange"浏览器事件来设置活动元素。
下面是一个可以使用的jsfiddle示例。
Javascript:
$(".nav-Ppal li a").on('click', function(e) {
// Hide all content, display the one related to hash-tag
$(".document_view").toggle(false);
$('.nav-Ppal li').removeClass("nav-Ppal-active", false);
});
$(window).on('hashchange', function() {
$("a[href='" + window.location.hash + "']").parent().addClass("nav-Ppal-active", true);
});
此外,将"活动"类放在你的第一个元素上,这样当它第一次加载时看起来是活动的:
<li class="nav-Ppal-active">
相关文章:
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如果其中一个子菜单项处于活动状态,则展开下拉菜单
- 当子菜单的父级或包含链接处于活动状态时,如何告知子菜单可见
- Jquery 无法返回到动画菜单列表上的活动状态
- JavaScript 下拉菜单在单击时处于活动状态,在外部单击时不活动
- 如果菜单处于活动状态或非活动状态,则切换图标的类.多级按钮菜单
- 当用户单击子菜单并在新页面中打开时,子菜单将保持活动状态
- 活动状态菜单 JavaScript
- 折叠菜单中的活动状态
- javascript菜单悬停处于活动状态
- 滚动经过时使菜单类处于活动状态
- 向jQuery滚动条/侧菜单添加当前/活动状态
- 在车把部分中设置导航菜单项为活动状态
- 当子菜单处于活动状态时,将类添加到父级li
- 在下拉菜单中获取要切换为活动状态的图像
- 崩溃引导3多层子菜单&打开子菜单时更改活动状态
- 当子菜单处于活动状态或悬停状态时,保持锚点悬停状态
- 引导导航条子菜单活动状态不工作
- 切换菜单处于活动状态
- 如何防止折叠菜单在页面处于活动状态时关闭