login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Wijzigen van CLASSes m.b.v. JS

Offline baasb001 - 10/10/2011 19:12
Avatar van baasb001Lid Hallo allemaal

Ik ben op zoek naar de techniek om met behulp van JS het gebruik van een class te wijzigen. Het gaat hier om een menukeuze waarbij na het kiezen van een item de achtergrond van de tekst wijzigt zodat duidelijk wordt welke keuze uit het menu actief is. Ik gebruik hiervoor een class die in een CSS-docu staat opgenomen.
De door mij bedachte oplossing werkt helaas niet. Wie wil mij helpen om de fout/oorzaak te achterhalen?

De CSS code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .outer{
  2. 	margin:0px;
  3. 	padding:0px;
  4. }	
  5. #menu {
  6. 	width: 200px;
  7. 	border-style: none none none none;
  8. 	border-color: #94AA74;
  9. 	border-width: 1px;
  10.     font-family: Arial;
  11.     font-size: 14px;
  12. 	}
  13. #menu ul{
  14. 	list-style:none;
  15. 	padding:0px;
  16. 	margin:0px;
  17. 	}
  18.  
  19. #menu li a {
  20. 	height: 32px;
  21.   	voice-family: "\"}\""; 
  22.   	voice-family: inherit;
  23.   	height: 24px;
  24. 	text-decoration: none;
  25. 	font-weight:normal;
  26. 	}	
  27.  
  28. #menu li a:link, #menu li a:visited {
  29. 	color: #FFFFFF;
  30. 	display: block;
  31. 	background-repeat:no-repeat;
  32. 	padding: 8px 0 0 10px;
  33. 	}
  34.  
  35. #menu li a:hover {
  36. 	color: #FFFFFF;
  37. 	background-repeat:no-repeat;
  38.     background-color: gray;
  39. 	padding: 8px 0 0 10px;
  40. 	}
  41.  
  42. #menu li a:active {
  43. 	color: #FFFFFF;
  44.     background-color: red;
  45. 	background-repeat:no-repeat;
  46. 	padding: 8px 0 0 10px;
  47. 	}
  48.  
  49. #menu li a.current{ 
  50. 	color: gray ;
  51. 	background-repeat:no-repeat;
  52.     background-color: red;
  53. 	padding: 8px 0 0 10px;
  54. 	}
  55.  
  56. #menu li a.nietactief{ 
  57. 	color: blue ;
  58. 	background-repeat:no-repeat;
  59.     background-color: red;
  60. 	padding: 8px 0 0 10px;
  61. 	}



De door mij bedachte routine in JS (die dus niet werkt)

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript" language="javascript">
  2.  
  3. function loadFrame(keuze) {
  4.  
  5.      alert(keuze);
  6.  
  7.      dockeuze = ['catalogus3.php','bladmuziek3.php'];
  8.      document.getElementById("activiteit").src = dockeuze[keuze - 1];
  9.  
  10.      titelkeuze1 = ['Audio','Bladmuziek orkest'];
  11.      document.getElementById("atitle1").innerHTML = titelkeuze1[keuze - 1];
  12.  
  13.      titelkeuze2 = ['Partij','Instrument'];
  14.      document.getElementById("atitle2").innerHTML = titelkeuze2[keuze - 1];
  15.  
  16.      classkeuze1 = ['current','nietactief'];
  17.      document.getElementById("regel1").classNames(classkeuze1[keuze - 1]);
  18.  
  19.      classkeuze2 = ['nietactief','current'];
  20.      document.getElementById("regel2").classNames(classkeuze2[keuze - 1]);
  21.  
  22.     }
  23.  
  24. </script>



En de code uit het HTML-deel

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td width="175px" align="left" bgcolor="#CC071E">
  2.             <div class="outer">	
  3.                 <div id="menu">
  4.                     <ul>
  5.                         <li><a id="regel1" name="regel1" onclick="loadFrame(1)" href="catalogus3.php" target="activiteit" >Muziekcatalogus</a></li>
  6.                     </ul>
  7.                 </div>
  8.              </div>        
  9.         </td>
  10.         <td width="175px" align="left" bgcolor="#CC071E">
  11.             <div class="outer">	
  12.                 <div id="menu">
  13.                     <ul>
  14.                        <li><a id="regel2" name="regel2" onclick="loadFrame(2)" href="bladmuziek3.php" target="activiteit" >Bladmuziek orkest</a></li>
  15.                     </ul>
  16.                 </div>
  17.              </div>        
  18.         </td>


Ik hoop een een spoedige reactie


George  

2 antwoorden

Gesponsorde links
Offline Dlol - 10/10/2011 20:06
Avatar van Dlol Lid Ik zou eens zoeken naar jQuery.

Daar gaat het zo makkelijk als dit:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#id_van_het_dom_element').attr('class', 'classname');
Bedankt door: baasb001
Offline vinTage - 10/10/2011 20:54
Avatar van vinTage Nieuw lid offtopic: Waarom frames terwijl je host php ondersteund?

Tenminste, dat maak ik op uit deze regel code..
Citaat:
dockeuze = ['catalogus3.php','bladmuziek3.php'];


Als je dan toch de door Dlol geopperde jQuery gaat bekijken, dan kun je die frames al vervangen door een div met overflow en inladen met jQuery's load()
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s