login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Tabblad activeren via javascript mislukt (Opgelost)

Offline jc2 - 02/07/2008 17:57 (laatste wijziging 03/07/2008 13:52)
Avatar van jc2PHP interesse Ik heb een menu met tabbladen gemaakt (wel bestaande plaatjes gebruikt) en nu zit ik met een probleem wat betreft de verwerking van het javascript-gedeelte.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="JavaScript">
  2. function tabblad(x) {
  3.  for(i=1; i<=100; i++){
  4.    if(i==x){
  5.    document.getElementById(x).className='tabaan';
  6.    }
  7.    else{
  8.       // UPDATE
  9.       if(document.getElementById(i)){
  10.       document.getElementById(i).className='tabuit';
  11.       }
  12.       else{
  13.       }
  14.    }
  15.  }
  16. } 
  17. </script>


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul id='menu'>
  2. <li><a onClick="javascript:tabblad(this.id);" id="1" class="tabuit" href='index.php?test=1'>Website voor particulieren</a></li>
  3. <li><a onClick="javascript:tabblad(this.id);" id="2" class="tabuit" href='index.php?test=2'>Website voor bedrijven</a></li>
  4. <li><a onClick="javascript:tabblad(this.id);" id="3" class="tabuit" href='index.php?test=3'>Datanetwerken</a></li>
  5. </ul>


Als ik op een tabblad klik, zou dit tabblad 'actief' moeten worden. Dit probeer ik middels bovenstaande code, maar dat werkt niet.
Wanneer ik gewoon class="tabaan" in mijn code zet, werkt het wel, maar het is de bedoeling dat de links via een database kunnen worden aangemaakt. Het aantal is mij dus nog onduidelijk.

Wie weet waarom hij het wel rechtstreeks doet, maar wanneer ik via javascript de class probeer te veranderen, er niets gebeurt?
Ik krijg geen foutmelding - ik zie enkel 1 seconde het javascript-fouttekentje linksonder in mijn browser - maar ik kan de fout zelf niet lezen.

voorbeeld zoals het nu is

plaatje zoals het moet zijn

7 antwoorden

Gesponsorde links
Offline dirk_ve - 03/07/2008 08:40
Avatar van dirk_ve Nieuw lid Er zitten 3 problemen in je script:
1/ een id moet beginnen met een letter. (werkt blijkbaar wel)
2/ Je doorloopt een lus die elementen met id 1 - 100 maar je hebt slechts 3 elementen. Vanaf het 4e element krijg je dus een foutmelding.
3/ Die foutmelding zie je maar even omdat je browser meteen na het klikken de andere pagina laadt. In deze pagina start alles opnieuw. Mogelijk heb je daarvoor die test=1 parameter voorzien.

Het aanwijs effect kan je gewoon met css verkrijgen d.m.v. a:hover

Via php zet je bij de juiste <a> class="tabaan"
Je css wordt dan iets als
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu a:hover,
  2. .tabaan {
  3.   opmaak wanneer actief
  4. }
Offline jc2 - 03/07/2008 13:31 (laatste wijziging 03/07/2008 13:52)
Avatar van jc2 PHP interesse @dirk:
Ik snap wat je bedoelt met je reactie, maar jouw oplossing voldoet niet aan mijn wensen.

Jouw oplossing is zoals ik met het script begonnen ben. Je klikt op een tabblad en via PHP geef je aan welk tabblad gehighlight moet worden en via css wordt er dan voor gezorgd dat het tabblad gehighlight is. Dit werkte wel gewoon.
Het probleem is dat ik wil dat als je op een tabblad klikt, dat de andere tabbladen automatisch 'uit' gaan tot je op een volgend tabblad klikt.
Omdat de site dynamisch wordt, lukt dit niet door in php class="tabaan" erbij te zetten.

Wat ik dus wil is het volgende:
- er zijn een x aantal tabbladen
- als op één van het x aantal tabbladen wordt geklikt, krijgt dat tabblad als classnaam mee 'tabaan', de rest moet 'tabuit' meekrijgen (moet denk ik met een lus?)

Update: Foutmelding
Het gaat hierbij over de regels die beginnen met <li>.
Citaat:
Regel: 121
Teken: 1
Fout: Object wordt verwacht
Code: 0
URL: http://www.erwinaugustijn.nl/vgc/index.php?type=2
Offline dirk_ve - 03/07/2008 14:07
Avatar van dirk_ve Nieuw lid
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Class aansturen</title>
  6.         <style type="text/css">
  7.             .tabaan {
  8.                 color: green;
  9.             }
  10.             .tabuit {
  11.                 color: red;
  12.             }
  13.         </style>
  14.         <script type="text/javascript">
  15.         	function tabblad(id) {
  16. 				// haal alle a elementen uit div id=menu
  17. 				var els=document.getElementById("menu").getElementsByTagName("a");
  18. 				// doorloop de array en geef de juiste classname
  19. 				for (var i=0; i<els.length; i++) {
  20. 					els[i].className = (id==els[i].id)?"tabaan":"tabuit";
  21. 				}
  22. 			}
  23.         </script>
  24.     </head>
  25.     <body>
  26.         <ul id='menu'>
  27.             <li>
  28.                 <a id="m1" class="tabuit" onclick="tabblad(this.id);return false;" href='?id=m1'>Website voor particulieren</a>
  29.             </li>
  30.             <li>
  31.                 <a id="m2" class="tabuit" onclick="tabblad(this.id);return false;" href='?id=m2'>Website voor bedrijven</a>
  32.             </li>
  33.             <li>
  34.                 <a id="m3" class="tabuit" onclick="tabblad(this.id);return false;" href='?id=m3'>Datanetwerken</a>
  35.             </li>
  36.         </ul>
  37.     </body>
  38. </html>
Offline jc2 - 03/07/2008 22:03 (laatste wijziging 03/07/2008 22:05)
Avatar van jc2 PHP interesse Dirk, nog even een vraagje.
Heb jij jouw code uitgetest?
Ik krijg hem namelijk nog niet werkzaam.
De functie ziet er nu wel aannemelijker uit, maar ik blijf de foutmelding uit mijn vorige post houden.

Dit is nu al mijn code:
Plaatscode: 11502
Offline dirk_ve - 04/07/2008 00:17 (laatste wijziging 04/07/2008 00:18)
Avatar van dirk_ve Nieuw lid Wijzig <script type="Javascript"> in <script type="text/javascript">.

Ik veronderstel dat die backslashes niet in je code staan. Zo ja, dan moeten ze er ook uit.

Mits die aanpassingen werkte jouw pagina bij mij.

Mijn script van vorige posting heb ik nog eens van deze site gekopieerd en geplakt en werkte in FF en IE7
Offline Gerard - 04/07/2008 00:19
Avatar van Gerard Ouwe rakker Het is natuurlijk onzinnig om dit met javascript te doen als er toch een refresh van de pagina in zit omdat je naar een andere lokatie navigeert. Je kan het dan net zo goed met PHP afhandelen.
Offline jc2 - 04/07/2008 13:28
Avatar van jc2 PHP interesse dank je dirk! 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s