Javascript - Menu změna třídy (class) po kliknutí na položku
Dobrý den může mi někdo poradit proč mi nefunguje tento kod.
Je to kod pro menu kdy když kliknu na položku změní se jí třída na "selectedMenu".
a u ostatních položek se nastaví třída na "normalMenu".
Něco jsem zkoušel v kodu níže ale nefunguje mi to v konzoly to píše chybu :
"Uncaught TypeError: Cannot set property 'className' of null".
Prosím poradte jak to opravit. Díky moc.
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="script.js"></script>
<script type='text/javascript'>
function zmen(x,y)
{
var z=0;
for (z=0;z<=y;z++)
{
var cName = 'normalMenu';
document.getElementById(z).className = cName;
}
var cName_X = 'selectedMenu';
document.getElementById(x).className = cName_X;
}
</script>
</head>
<body>
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" id="1" class="normalMenu" onclick="zmen(1,6);">Home</a></li>
<li><a href="#" id="2" class="normalMenu" onclick="zmen(2,6);">Services</a></li>
<li><a href="#" id="3" class="normalMenu" onclick="zmen(3,6);">Our clients</a></li> <!-- class="selectedMenu" -->
<li><a href="#" id="4" class="normalMenu" onclick="zmen(4,6);">The team</a></li>
<li><a href="#" id="5" class="normalMenu" onclick="zmen(5,6);">About us</a></li>
<li><a href="#" id="6" class="normalMenu" onclick="zmen(6,6);">Contact us</a></li>
</ul>
</div>
Teda.
Vždyť to vidíš. Identifikátorem (id) nemůže být číselná konstanta!
Za sebe bych doporučil přidat před číslo položky nějaké písmeno.
Nástřel:
Momentálně něco dělám, takže nezaručuji funkčnost té mé úpravy.
Ale myslím, že je jasné, jak lze postupně iterovat.
A teď jsem se zamyslel znovu.
Lepším řešením je upravit parametry celé třídy nebo ji přepnout, pokud to nějak jde.
aha tak to jsem netušil že nesmí být id číslo , já jsem to nikdy nedělal s číslem takže nevím ale nicméně i po vaší úpravě se nic nezměnilo stále to píše stejnou hlášku a nefunguje to.Javascript osobně nesnáším mám radši PHP ale jsou takové věci které prostě vyžadují javascript.
Ono mě se to předtím podařilo udělat tak že když kliknu na nějakou položku v menu tak se mi změní ta třída
(class selectedMenu) ale ostatní položky se mi nezměnily zpět na neaktivní. (class normalMenu)
Když máš rád PHP: http://polopate.jakpsatweb.cz/index.php?page=inclu de4
Menu to určitě nebude
Navíc ti, kteří budou mít javascript vypnutý to ani neuvidí. Lepší by bylo CSS. Na www.interval.cz je těch menu v CSS několik.
http://interval.cz/vysledky-vyhledavani/?cx=017179 391598217508746%3A6y9qdijoo0q&cof=FORID%3A11&ie=UT F-8&q=menu+css&sa=Hledat
Pretože pre z=0 ti to nenájde žiaden element. Buď čísluj elementy od 0 alebo začínaj so z=1.
Výhrady ku kódu sa mi nechce písať, tak len v skratke: identifikátory (okrem toho, že by nemali začínať číslicou) na takejto stránke vôbec nepotrebuješ, taktiež nepotrebuješ opakovať class=normalMenu, taktiež onclick by nemuselo byť priamo v HTML a ani odkazy by tam nemuseli byť (alebo keď už, tak aspoň na #home, #services atď s tým, že na začiatku to dáš do stavu podľa location.hash).
díky funguje to ale blbne to, no nevadí.
Je to z tohoto článku (tutorialzine.com) a chtěl jsem to zkusit upravit podle popisu výše nevyšlo to nevadí.