login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Navigatie

Offline lasdesigner - 23/06/2007 15:53
Avatar van lasdesignerPHP beginner Hallo,

Ik denk dat dit met javascript moet, dus vandaar dat ik hem hier post.
Ik wil een menu, dat als je erop klikt dat dan de achtergrond active word. Maar hoe weet ik nu welk menu knopje active is? Hoe kan ik dit met javascript beheren? Ik wil dus dat style aangepast is van degene die active is.

Dus ik heb: HOME / PORTFOLIO / CONTACT
Klik ik op HOME > Home zwarte letters en portfolio en contact grijze letters
Klik op PORTFOLIO > Portfolio zwarte letters en de andere 2 grijze. Maar ik wil dus dat dit de hele tijd zo blijft totdat je op een andere knop geklikt hebt.

Hoe kan ik dit het beste doen?

Alvast bedankt,

14 antwoorden

Gesponsorde links
Offline Rens - 23/06/2007 15:57
Avatar van Rens Gouden medaille

Crew algemeen		 Dit zou kunnen met onclick.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. onclick="this.style.color='#000000';"

Dacht ik...
Offline lasdesigner - 23/06/2007 16:03
Avatar van lasdesigner PHP beginner en als ik meerdere dingen wil veranderen doe ik gewoon:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. onclick="this.style.color='#000', this.style.background-color='#fff';"
?
Offline Rens - 23/06/2007 16:05 (laatste wijziging 23/06/2007 16:09)
Avatar van Rens Gouden medaille

Crew algemeen		 Nee.
Je moet een ; gebruiken ipv een ,.
Dus dan krijg je zoiets:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. onclick="this.style.color='#000';this.style.backgroundColor='#fff';"
Offline MindPrison - 23/06/2007 16:06 (laatste wijziging 23/06/2007 16:09)
Avatar van MindPrison PHP gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. onclick="this.style.color='#000'; this.style.backgroundColor='#fff';"
Geen - bij background-color, maar een hoofdletter.
Offline Godlord - 23/06/2007 16:10
Avatar van Godlord PHP gevorderde alle 3 een id, name geven dan een stuk javascript schrijven:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type='type/javascript'>
  2. function set_home_as_active() {
  3.     home = document.getElementById('home_link').style.color = '#000000';
  4.     port_folio = document.getElementById('port_folio_link').style.color = '#CCCCCC';
  5.     contact = document.getElementById('contact_link').style.color = '#CCCCCC';
  6. }
  7.  
  8. function set_portfolio_as_active() {
  9.     home = document.getElementById('home_link').style.color = '#CCCCCC';
  10.     port_folio = document.getElementById('port_folio_link').style.color = '#000000';
  11.     contact = document.getElementById('contact_link').style.color = '#CCCCCC';
  12. }
  13.  
  14. function set_contact_as_active() {
  15.     home = document.getElementById('home_link').style.color = '#CCCCCC';
  16.     port_folio = document.getElementById('port_folio_link').style.color = '#CCCCCC';
  17.     contact = document.getElementById('contact_link').style.color = '#000000';
  18. }
  19. <script>

Dan net zoals Rens al onclick gebruiken en dan de functie aanroepen. Normaal zou het dan ook nog iets als dit moeten worden:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href='#' id='home_link' name='home_link' onclick='set_home_as_active()'>Home</a>
  2. <a href='#' id='port_folio_link' name='port_folio_link' onclick='set_portfolio_as_active()'>Portfolio</a>
  3. <a href='#' id='contact_link' name='contact_link' onclick='set_contact_as_active()'>Contact</a>
Offline lasdesigner - 23/06/2007 16:15
Avatar van lasdesigner PHP beginner dank je allemaal, dat van Godlord (apart bestandje) vond ik wel handig! Denk dat ik daar is mee ga puzzelen.
Offline Rens - 23/06/2007 16:18
Avatar van Rens Gouden medaille

Crew algemeen		 Er zou nog een manier zijn om het makkelijker te maken.
Weet alleen niet of het kan.
Je zou dan een functie maken waar je 1 parameter aan meegeeft.
Vervolgens loopt de functie door alle id's heen.
En alles waarvan de id niet gelijk is aan de parameter word de niet-actieve bgkleur gegeven.
De id die wel matched, krijgt de actieve bg kleur.

Maar aangezien ik niet zo'n javascripter ben, zou ik niet weten hoe je alle id's ophaalt.
Als dat er eenmaal is zou je die functie makkelijk kunnen maken.
Offline lasdesigner - 23/06/2007 16:30
Avatar van lasdesigner PHP beginner Ehm, Godlord, ik heb nog een vraagje over jou script, je hebt nu <a href='#' maar hoe link ik hem nu door naar de pagina: /portfolio/index.php bijvoorbeeld?

Ja Rens klopt, ik snap je idee; maar heb zelf ook niet genoeg verstand van javascript hiervoor 
Offline Godlord - 23/06/2007 17:06
Avatar van Godlord PHP gevorderde Ow Rens je bedoelt zoiets dit?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type='type/javascript'>
  2. function set_as_active(active_id) {
  3.     document.getElementById('home_link').style.color = '#CCCCCC';
  4.     document.getElementById('port_folio_link').style.color = '#CCCCCC';
  5.     document.getElementById('contact_link').style.color = '#CCCCCC';
  6.     document.getElementById(active_id).style.color = '#000000';   
  7. }</script>


en lasdesigner, ofwel href aanpassen of wel via javascript maar dan zou ik gewoon via CSS werken want dan heb je 3 verschillende pagina's. De link van de pagina de zwarte kleur geven en de rest grijs. Gewoon gebruik maken van de atribuut style.

Op bv. home.php dan dit.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href='home.php' style='color: #00000;'>Home</a>
  2. <a href='portfolio.php' style='color: #CCCCCC;'>Portfolio</a>
  3. <a href='contact.php' style='color: #CCCCCC;'>Contact</a>
Offline Rens - 23/06/2007 17:28
Avatar van Rens Gouden medaille

Crew algemeen		 @Godlord, nee, dat bedoel ik niet.
Ik bedoel een functie die automatisch langs alle ID's loopt.
Dus niet een waar je alle ID's zelf onder een rijtje moet zetten...
Offline Godlord - 23/06/2007 17:30
Avatar van Godlord PHP gevorderde Dan ga je de hele website zwart maken(^^) dus dat is niet zo een goed idee. 
Offline Rens - 23/06/2007 18:22
Avatar van Rens Gouden medaille

Crew algemeen		 Ja, ok.
Maar dat zou je kunnen oplossen door de id's als volgt te noemen:
menuHome
menuContact
En dan de functie laten kijken of de naam gelijk is aan "menu..." 
Offline vinTage - 23/06/2007 18:42 (laatste wijziging 23/06/2007 18:49)
Avatar van vinTage Nieuw lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="/home"<?php if(isset($_GET['pagina']) && $_GET['pagina']=='home'){echo 'class="zwart"';}?>>Home</a>
Offline BramBo - 27/06/2007 20:48 (laatste wijziging 27/06/2007 20:49)
Avatar van BramBo JS gevorderde zoiets ?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function() { 
  2.  var Regxp = /^menu.*?$/;
  3.  var a = document.getElementsByTagName('a');
  4.  for (var i=0;i<a.length;i++)
  5.   {
  6.       if(Regxp.test(a[i].className) === true ||
  7.          Regxp.test(a[i].id) === true) {
  8.              a[i].onclick = ColorMe;
  9.       }
  10.   }
  11. }
  12.  
  13. function ColorMe() { 
  14.  var Sender = window.event.srcElement;
  15.  
  16.  Sender.style.color = '#000';
  17.  ResetKleurtjes();
  18. }
  19.  
  20. function ResetKleurtjes() {
  21.  var Regxp = /^menu.*?$/;
  22.  var a = document.getElementsByTagName('a');
  23.  for (var i=0;i<a.length;i++)
  24.   {
  25.       if(Regxp.test(a[i].className) === true ||
  26.          Regxp.test(a[i].id) === true) {
  27.              a[i].style.color = '#929292';
  28.       }
  29.   }
  30. }


Niet getest, maar ik denk dat ie zo werkt.

Als n sidenote: alle <a> elementen die n class of id hebben die met menu beginnen krijgen n onclick functie die zichzelf kleurt..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.472s