4

嘿，我正在做一个菜单，我希望当我单击该项目时进入活动位置，然后当单击另一个项目时，它会更改为最近单击的活动并从最后一个项目中删除状态，这就是我正在做的但是不工作...如果有人可以帮助我，我将不胜感激。

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");
}
4

2 回答 2

2 
$(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/

于 2013-04-08T20:08:41.043 回答
0

这类似于我最近提出的使用“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">
于 2013-04-08T20:11:18.770 回答