Переключить меню активно

Эй, я делаю меню, и я хочу, чтобы при щелчке элемента в активной позиции, а затем, когда нажимается другой элемент, он изменяется на недавно нажатый на активный и удаляет состояние из последнего, это это то, что я делаю, но не работает ... Я ценю, если кто-то может мне помочь.Переключить меню активно

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

источник

2013-04-08 Jhonnatan Gonzalez Rodriguez

почему вы делаете это таким образом? –

FYI: Вам никогда не следует начинать атрибут 'id' с числом, а тем более весь атрибут должен быть полностью числовым. –

$(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-08 20:08:41

Не забудьте удалить console.log после проверки функции. Это сломает некоторые браузеры. – thelr

Это хороший момент :) –

В частности, он сломает IE9. Если вы хотите оставить функциональные возможности отладки, просто замените console.log() пустой фиктивной функцией. Когда вы вернетесь к работе над своим кодом, вам не нужно будет повторно вводить десятки во всевозможные команды console.log(). –

Это похоже на solution I recently came up with, который использует «hashchange» событие браузера для установки активного элемента.

Вот jsfiddle example, который вы можете использовать.

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-08 20:11:18 BumbleB2na

Переключить меню активно

ответ

Смежные вопросы