Schimbare clasa in javascript

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 3:46 pm

Am urmatorul cod :

Cod: Selectaţi tot

function linksplit(url){
   return url.substring(url.lastIndexOf('/')+1);
}
function linkactive(){
   var numepagina = linksplit(document.location.href);
   var meniu = document.getElementById('meniu');
   var a_meniu = meniu.getElementsByTagName('a');
      for(i=0; i<a_meniu.length; i++){
   var href = a_meniu[i].getAttribute('href');
   if(href == numepagina){
   a_meniu[i].className ="curentpage";

   
   }
   }
}

window.onload = function(){
   linkactive();
}


Este un cod care tine activ butonul din meniu al fiecarei pagini curente.
Daca folosesc a_meniu[i].backgroundColor = "none"; functioneaza daca folosesc cu className nu functioneaza. Daca folosesc a_meniu[i].parentNode.className imi adauga stil lui <li> curent, numai la atributul a nu merge. Care ar fi problema ca nu am nici cea mai mica idee.



Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Schimbare clasa in javascript

Mesajde MihaiC » Lun Mar 25, 2013 3:51 pm

Arata si html/css.
Inprincipiu tu pui clasa "curentpage" la <a>
Dev @ oblio.eu

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 4:00 pm

la html am asa:

Cod: Selectaţi tot

<ul id="meniu">
<li><a href="index.html" title="acasa">Home</a></li>
<li><a href="coperti-de-diploma.html" title="coperti">Coperti</a></li>
<li><a href="print-lucrare-diploma.html" title="printare lucrare">Print</a></li>
<li><a href="comanda-coperta-diploma.html" title="comanda coperta">Comanda</a></li>
<li><a href="magazine-coperti-diploma.html" title="magazinul nostru">Magazin</a></li>
<li><a href="contact.html" title="contacteaza-ne">Contact</a></li>
</ul>


iar la css

Cod: Selectaţi tot

.curentpage{padding5px; background:none; color:#cccccc;}

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 4:13 pm

MihaiC scrie:Arata si html/css.
Inprincipiu tu pui clasa "curentpage" la <a>


Asa as vrea...

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Schimbare clasa in javascript

Mesajde MihaiC » Lun Mar 25, 2013 4:40 pm

in loc de

Cod: Selectaţi tot

.curentpage{padding5px; background:none; color:#cccccc;}


pune

Cod: Selectaţi tot

#meniu a.curentpage {padding:5px; background:none; color:#ccc;}
Dev @ oblio.eu

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 4:56 pm

MihaiC scrie:in loc de

Cod: Selectaţi tot

.curentpage{padding5px; background:none; color:#cccccc;}


pune

Cod: Selectaţi tot

#meniu a.curentpage {padding:5px; background:none; color:#ccc;}



Functioneaza...o explicatie se poate? ca sa inteleg si eu ideea.

Avatar utilizator
Andrei HAINAROSIE
PHPRomania Supporter
Mesaje: 15
Membru din: Joi Oct 18, 2012 8:20 pm
Localitate: Bucuresti
Contact:

Re: Schimbare clasa in javascript

Mesajde Andrei HAINAROSIE » Lun Mar 25, 2013 5:30 pm

Salut,

n-ai caracterul ":" intre "padding" si "5px"

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Schimbare clasa in javascript

Mesajde MihaiC » Lun Mar 25, 2013 5:32 pm

Pai si in css trebuie sa existe niste prioritati.
.curentpage este un selector general, pe cand #meniu a.curentpage selecteaza exact elementele dorite.
Al doilea are prioritate.

Mai e si css inline ( <a style="background:none">... ) care are prioritate mai mare si !important ( .curentpage { background: none !important; } ) cea mai mare.
Dev @ oblio.eu

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 6:14 pm

MihaiC scrie:Pai si in css trebuie sa existe niste prioritati.
.curentpage este un selector general, pe cand #meniu a.curentpage selecteaza exact elementele dorite.
Al doilea are prioritate.

Mai e si css inline ( <a style="background:none">... ) care are prioritate mai mare si !important ( .curentpage { background: none !important; } ) cea mai mare.


Si de ce cu a_meniu[i].parentNode.classname imi aplica stilul tagului <li> css fiind .curentpage (fara #meniu li a .curentpage)..ca tot nu inteleg

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Schimbare clasa in javascript

Mesajde MihaiC » Lun Mar 25, 2013 7:06 pm

Pai a_meniu[i] in DOM e elementul <a> curent iar a_meniu[i].parentNode e parintele lui <a> curent, adica elementul <li>
Dev @ oblio.eu

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Schimbare clasa in javascript

Mesajde mirceabondar » Lun Mar 25, 2013 7:56 pm

MihaiC scrie:Pai a_meniu[i] in DOM e elementul <a> curent iar a_meniu[i].parentNode e parintele lui <a> curent, adica elementul <li>


Asta am inteles..ce nu am inteles eu este cum pentru li a putut fi aplicat stilul css .clasa fara #meniu li.clasa iar pentru a a trebuit sa scriu #meniu li .clasa a{}...si de ce nu s-a putut aplica stilul .clasa fara sa mai scriu #meniu li ..asta nu inteleg..

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Schimbare clasa in javascript

Mesajde MihaiC » Lun Mar 25, 2013 9:17 pm

Precum am spus mai sus, totul are lagatura cu "prioritatea".
Atata timp cat nu sunt proprietati care sa se "certe" intre ele, elementul va avea toate proprietatile date.
Dev @ oblio.eu


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 4 vizitatori