[Javascript en/of PHP] de id van een li onclick veranderen

[Verwijderd]

Tweakers,

Ik heb een menuutje gemaakt welke bestaat uit li's die er uitzien als tabbladen. Zodra er op een li geklikt wordt moet het id van die li gewijzigd worden in "current", dit zorgt ervoor dat het tabblad geselecteerd wordt (komt naar voren, krijgt een lichtere achtergrond).

Ik krijg dit niet voor elkaar, ik denk dat ik het beste met Javascript kan doen d.m.v een onclick event. Als het in php kan dan wil ik dat ook wel gebruiken.

Ik heb nu het volgende in Javascript geprust, dit werkt dus niet:

code:

<div id="header">
 <ul>
  <li id="1"><a href="index.php?page=page/inlog.php" onclick="document.all.id1='current';">Inloggen</a></li>

[ Voor 16% gewijzigd door Verwijderd op 09-12-2004 19:15 ]

[Scott]

Weet niet zeker of het werkt, maar ik kwam op dit:

code:

<li id="1"><a href="index.php?page=page/inlog.php" onclick="this.id='current';">Inloggen</a></li>

[Verwijderd]

Je pakt het imo verkeerd aan. Je moet niet het ID willen wijzigen, je gebruikt het ID om het tabblad te wijzigen.

Dus niet één statische definitie 'current', maar de definitie 'current' toepassen op het element wat je wilt.

Voorbeeld.. er mag voor zover ik weet maar één element met een bepaald ID zijn. Je zou dus eerst het huidige 'current' id een ander ID moeten geven, voordat je dit kunt doen.

Beter is bv. zoiets:

code:

  <li id="1">
    <a href="index.php?page=page/inlog.php" onclick="document.all.id1.color='red'';">Inloggen</a>
  </li>

Of zoiets. Of je verandert de class van je id (als dat al kan)

[ Voor 50% gewijzigd door Verwijderd op 09-12-2004 19:21 ]

[Verwijderd]

dit script slaat volgens mij nergens op.
het heeft geen zin de id te veranderen want via de href spring je toch naar een andere pagina.

Maar misschien bedoel je dit:

code:

  <li id="id1"><a href="index.php?page=page/inlog.php" onclick="document.all.id1.id='current';">Inloggen</a></li>

[Verwijderd]

@ScottB:
Dat werkt niet helaas. Mijn voorbeeld komt uit een topic waarin iemand de achtergrondkleur van een tabel wilde wijzigen. Ik denk nu dat het helemaal niet kan met 1 regel Javascript, toch bedankt voor het meedenken.

@De Generaal:
Ik snap niet helemaal hoe je dat bedoelt. Het wijzigen van het id zorgt ervoor dat het tabblad er anders uit komt te zien, dat is alles wat er moet gebeuren. Welke oplossing had jij voor ogen dan?

[Verwijderd]

Ik zou echt nóóit de id van een element wijzigen. Als je per se wilt dat er iets gebeurt met een element, verander dan de className, of ken expliciet bepaalde style rules toe.

Een id wijst één enkel element aan. Het lijkt me niet handig om dat later te wijzigen. Ter illustratie. Stel ik maak een script dat eerst bepaalde nodes opzoekt en een referentie naar het object opslaat. Als je dan de id van het object gaat wijzigen, verander je nog niet die referentie. Het gevolg is dat je zeer vreemde situaties kunt krijgen. Verkeerde menutjes die openklappen, etcetera. Nee, je kunt het best een tabblad alleen een andere className geven, dat is het eenvoudigst.

[Verwijderd]

@Cheatah
Ik denk dat je het probleem wat grootser ziet dan het is. In mijn stylesheet staat deze opmaak voor het id current, dat is de enige plek waar id current voorkomt. Die il staan gewoon weer binnen id=header.

CSS:

code:

#header #current {
    background-image:url(images/left_on.gif);
    border-width:0;
    }

#header #current a {
    background-image:url(images/right_on.gif);
    padding-bottom:5px;
    color: #666666;
    }

[Johnny]

IDs moet je niet wijzigen, ze zijn uniek en wijzen naar een enkel element.

Zodra je ze gaat wijzigen weet je niet meer welk element waar staat. Je moet dus gewoon de ID hetzelfde houden en het class attribuut wijzigen, omdat die gebruikt wordt om een bepaalde opmaak er aan te geven.

Verder moet je ook geen document.all.blabla gebruiken maar documen.getElementById('blabla') dat werkt tenminste in alle moderne browsers.

[crisp]

en dit hoort dus in Webdesign & Graphics

[Verwijderd]

Verwijderd schreef op donderdag 09 december 2004 @ 19:23:
@De Generaal:
Ik snap niet helemaal hoe je dat bedoelt. Het wijzigen van het id zorgt ervoor dat het tabblad er anders uit komt te zien, dat is alles wat er moet gebeuren. Welke oplossing had jij voor ogen dan?

Een ID moet, zoals al gezegd, uniek zijn. Mag maar aan één element toegekend zijn.

Stel jij hebt 3 tabbladen. Ik klik op de eerste. Die geef jij dan het ID 'current'. Vervolgens klik ik op de 2e, die geef jij het ID 'current'. Op dat moment zijn er 2 tabbladen met het ID 'current', wat niet mag.

Of je moet eerst het ID 'current' opzoeken, en die veranderen. Echter waar verander je die in?

bv. je hebt 3 tabbladen, met id's tab1, tab2 en tab3. Ik klik op 2, dan wordt tab2 dus 'current', je hebt dan dus tab1, current, tab3. Ik klik op 3, dan wordt 3 current. Tab2 mag geen current meer heten, dus die moet je ook een andere naam geven, echter welke? Je moet dan alle tabbladen gaan controleren welke naam er niet meer gebruikt is.

Je ziet, dat wordt rommel.

Verander dan de class..

[Verwijderd]

Ok, daar had ik niet aan gedacht dat de waarde current "onthouden" wordt. Hoe kan ik het wel voor elkaar krijgen dan met het veranderen van classes?

[Verwijderd]

Je zoekt eerst de class 'current' op, die zet je terug naar de class die een niet-geselecteerd tabblad heeft. Daarna zet je het huidige tabblad naar de class 'current'. Kloar.

Ik zou niet proberen dit allemaal in een onClick te vrotten, het is netter een functie aan te maken en die aan te roepen vanuit je onClick.

[Verwijderd]

Generaal, kun je een voorzetje geven? Javascript is niet mijn sterkste kant (en dat is een understatement)..

[Verwijderd]

JavaScript:

function setSelected(el) {
   var siblings = el.parentNode.childNodes;

   for (var i = 0; i < siblings.length; i++) {
      if (siblings.item(i).nodeType != el && siblings.item(i).nodeType == 1) {
         siblings.item(i).className = '';
      }
   }

   el.className = 'selected';
}

Cascading Stylesheet:

   .selected {
      color: red;
   }

HTML:

<ul>
   <li onclick="setSelected(this);">Item 1</li>
   <li onclick="setSelected(this);">Item 2</li>
   <li onclick="setSelected(this);">Item 3</li>
   <li onclick="setSelected(this);">Item 4</li>
</ul>

Dit kun je vast wel aanpassen tot iets wat je zelf kunt gebruiken.
parentNode, childNodes, item() en className zijn DOM properties en methoden, mocht je daar meer over willen weten, weet je nu waar je naar moet zoeken

[Verwijderd]

code:

<HTML>
  <HEAD>
    <STYLE>
      li.current    {color : red;
                     cursor: hand;}
      li.unselected {color : green;
                     cursor: hand}  
    </STYLE>
    <SCRIPT>
      function SetCurrent(obj)
        {var oArrLi = document.getElementsByTagName("LI"); 
         var nCount = oArrLi.length;
         for (var i = 0; i < nCount; ++i) 
           {if (oArrLi[i].className == 'current') 
             {oArrLi[i].className='unselected';
             }
           }
         obj.className="current";
        }
    </SCRIPT>
  </HEAD>
  <BODY>
    <li class="current" onClick="SetCurrent(this)">Blaat1</li>
    <li class="unselected" onClick="SetCurrent(this)">Blaat2</li>
  </BODY>
</HTML>

Getest en werkend bevonden in IE. Die cursor zal je nog iets moeten wijzigen voor FF geloof ik.

//edit
Mijn methode doorloopt ALLE li's in een document, wat dat betreft is die van Cheatah netter, die pakt alleen de child elementen van de parent.

[ Voor 36% gewijzigd door Verwijderd op 09-12-2004 20:19 ]

[Verwijderd]

@De generaal (en ook Cheated):
De voorbeelden die jullie gaven werken inderdaad, top. Er is alleen een probleem, binnen die li's staan links (het is immers een navigatiebalk) en nu wordt de class alleen veranderd als men op de li klikt en niet als men op de link klikt.

Ik heb al gekeken of ik het zelf goed aan de praat krijg, maar dat lukt me niet. Het is zeker niet mogelijk om het OnClick event aan de link te hangen, zodat bij Onclick de waarde van de class van de li veranderd wordt?

[ Voor 5% gewijzigd door Verwijderd op 09-12-2004 20:31 ]

[Verwijderd]

Verwijderd schreef op donderdag 09 december 2004 @ 20:29:
@De generaal (en ook Cheated):
De voorbeelden die jullie gaven werken inderdaad, top. Er is alleen een probleem, binnen die li's staan links (het is immers een navigatiebalk) en nu wordt de class alleen veranderd als men op de li klikt en niet als men op de link klikt.

Ik heb al gekeken of ik het zelf goed aan de praat krijg, maar dat lukt me niet. Het is zeker niet mogelijk om het OnClick event aan de link te hangen, zodat bij Onclick de waarde van de class van de li veranderd wordt?

Wat doet die link precies?

[Verwijderd]

De link ziet er zo uit:

code:

<a href="index.php?page=page/inlog.php">Inlogpagina</a>

Hij opent dus de indexpagina en geeft als variabele mee dat $page=page/inlog.php, die variabele wordt vervolgens door php geincluded.

M.a.w de link opent een pagina

[ Voor 7% gewijzigd door Verwijderd op 09-12-2004 20:58 ]

[Verwijderd]

Verwijderd schreef op donderdag 09 december 2004 @ 20:57:
De link ziet er zo uit:

code:

<a href="index.php?page=page/inlog.php">Inlogpagina</a>

Hij opent dus de indexpagina en geeft als variabele mee dat $page=page/inlog.php, die variabele wordt vervolgens door php geincluded.

M.a.w de link opent een pagina

Ik neem aan dat je bedoeling is die link in een nieuw venster te openen?

In dat geval zou je zoiets kunnen overwegen:

code:

<HTML>
  <HEAD>
    <STYLE>
      li.current    {color : red;
                     cursor: hand;}
      li.unselected {color : green;
                     cursor: hand}  
    </STYLE>
    <SCRIPT>
      function SetCurrent(obj,location)
        {var oLi = document.getElementsByTagName("LI"); 
         var nCount = oLi.length;
         for (var i = 0; i < nCount; ++i) 
           {if (oLi[i].className == 'current') 
             {oLi[i].className='unselected';
             }
           }
         obj.className="current";
         if (location != '')
             {window.open(location);
             }
        }
    </SCRIPT>
  </HEAD>
  <BODY>
    <li class="current" onClick="SetCurrent(this,'anderepagina.html')">Blaat1</li>
    <li class="unselected" onClick="SetCurrent(this,'')">Blaat2</li>
  </BODY>
</HTML>

[Verwijderd]

Generaal, nee sorry dat is helaas niet de bedoeling. Hij refresht als het ware de indexpagina met de juiste waarde voor de variabele page..

Als ik jouw script gebruik en i.p.v anderepagina.html index.php?page=page/inlog.php gebruik, doet hij het nog niet goed. Het zal dus toch op een andere manier moeten.

Hartstikke bedankt voor het meedenken en de moeite. Jammer genoeg is het nu nog opgelost. Weet jij of iemand anders nog een andere manier?

[hlz]

Als je complete pagina inclusief tabbar refresht zul het geselecteerde tabje of met een onload en wat javascript moeten zetten, of met php het LI-tje van een 'css-geselecteerd-class' moeten voorzien.

[Verwijderd]

Hoeft niet, je kunt ook in mijn voorbeeld de 'window.open' vervangen door 'document.location'. Dan laad hij het huidige document opnieuw. Dus:

code:

<HTML>
  <HEAD>
    <STYLE>
      li.current    {color : red;
                     cursor: hand;}
      li.unselected {color : green;
                     cursor: hand}  
    </STYLE>
    <SCRIPT>
      function SetCurrent(obj,location)
        {var oLi = document.getElementsByTagName("LI"); 
         var nCount = oLi.length;
         for (var i = 0; i < nCount; ++i) 
           {if (oLi[i].className == 'current') 
             {oLi[i].className='unselected';
             }
           }
         obj.className="current";
         if (location != '')
             {document.location=location;
             }
        }
    </SCRIPT>
  </HEAD>
  <BODY>
    <li class="current" onClick="SetCurrent(this,'anderepagina.html')">Blaat1</li>
    <li class="unselected" onClick="SetCurrent(this,'')">Blaat2</li>
  </BODY>
</HTML>

//edit
lees de post nog eens.. je hebt gelijk. Indien je de hele pagina opnieuw inlaad, zal ook de class weer teruggezet zijn naar de oorspronkelijke class.

Dat is vrij eenvoudig te doen door de pagina te laden met een parameter, en in de onload aan de hand van die parameter de juiste tab op 'current' te zetten.

Dat ga ik niet helemaal meer voor je uitwerken, want dit begint wel erg te lijken op een scriptrequest zo. Misschien wat verdiepen in javascript?

[ Voor 30% gewijzigd door Verwijderd op 09-12-2004 22:04 ]

[Verwijderd]

Me meer in javascript verdiepen heb ik weinig zin in, ben nu al druk genoeg mezelf php aan te leren.

Ik heb het dan ook met PHP opgelost, wel op een ietwat ranzige manier. Ik kijk welke waarde $page heeft en dan schrijf ik op basis daarvan de HTML regels. De controle gebeurt door 7 if functies, zoals hieronder. Ranzig, maar het werkt.

De Generaal en Cheatah bij deze hartstikke bedankt voor de moeite!

PHP:

if ($page == "page/inlog.php") {        
    print ("<li class=\"current\"><a href=\"index.php?page=page/inlog.php\">Inloggen</a></li>"); 
    print ("<li><a href=\"index.php?page=page/inslag.php\">Inslag</a></li>");       
print ("<li><a href=\"index.php?page=page/uitslag.php\">Uitslag</a></li>");
    print ("<li><a href=\"index.php?page=page/overzichten.php\">Overzichten</a></li>");
    print ("<li><a href=\"index.php?page=page/beheer.php\">Beheer</a></li>");
    print ("<li><a href=\"index.php?page=page/uitloggen.php\">Uitloggen</a></li>");
    print ("</ul>"); //print het einde van de ul
    print ("</div>"); //print het einde van div
    }

edit: even het commentaar eruit gehaald omdat de layout verneukt werd. De code wordt trouwens zowiezo wel een beetje verneukt..

[ Voor 147% gewijzigd door Verwijderd op 09-12-2004 23:21 ]

[Verwijderd]

offtopic:
cursor: hand; is IE only, gebruik: cursor: pointer;

[Verwijderd]

Verwijderd schreef op donderdag 09 december 2004 @ 23:18:

offtopic:
cursor: hand; is IE only, gebruik: cursor: pointer;

Dat gaf ik al aan