Aktive Linkfarbe ändern

S

sente

Erfahrenes Mitglied
Hallo, habe ein kleines Menuscript geschrieben und würde benötigen, dass wenn ein Unterpunkt aufgemacht wird, der Oberpunkt eine andere Farbe erhält.
Habs mit style.linkColor, style.fgColor und style.color versucht, jedoch ohne Erfolg. :(

Jemand einen Rat?

Hier der code:

Das Menu:
Code: 
<ul class="menu">
					<li id="profil" class="upper"><a href="javascript:show('profil')">B&uuml;roprofil</a></li>
					<li id="steckbrief" class="inner"><a href="?page=steckbrief">Steckbrief »</a></li>
					<li id="leistungsbereich" class="inner"><a href="?page=leistungsbereich">Leistungsbereich »</a></li>
					<li id="team" class="inner"><a href="?page=team">Team »</a></li>
					<li id="referenzen" class="upper"><a href="javascript:show('referenzen')">Referenzen</a></li>
					<li id="betonbau"><a href="?page=projekte&art=betonbau">Betonbau »</a></li>
					<li id="betonbauinplanung"><a href="?page=projekte&art=betonbau&type=inplanung">in Planung »</a></li>
					<li id="betonbauinbau"><a href="?page=projekte&art=betonbau&type=inbau">in Bau »</a></li>
					<li id="betonbaugebaut"><a href="?page=projekte&art=betonbau&type=gebaut">gebaut »</a></li>
					<li id="holzbau"><a href="?page=projekte&art=holzbau">Holzbau »</a></li>
					<li id="holzbauinplanung"><a href="?page=projekte&art=holzbau&type=inplanung">in Planung »</a></li>
					<li id="holzbauinbau"><a href="?page=projekte&art=holzbau&type=inbau">in Bau »</a></li>
					<li id="holzbaugebaut"><a href="?page=projekte&art=holzbau&type=gebaut">gebaut »</a></li>
					<li id="stahlbau"><a href="?page=projekte&art=stahlbau">Stahlbau »</a></li>
					<li id="stahlbauinplanung"><a href="?page=projekte&art=stahlbau&type=inplanung">in Planung »</a></li>
					<li id="stahlbauinbau"><a href="?page=projekte&art=stahlbau&type=inbau">in Bau »</a></li>
					<li id="stahlbaugebaut"><a href="?page=projekte&art=stahlbau&type=gebaut">gebaut »</a></li>
					<li id="jobangebote" class="upper"><a href="?page=jobs">Jobangebote</a></li>
					<li id="kontakt" class="upper"><a href="javascript:show('kontakt')">Kontakt</a></li>
					<li id="lageplan"><a href="?page=lageplan">Lageplan »</a></li>
					<li id="anschrift"><a href="?page=anschrift">Anschrift »</a></li>
					<li id="impressum"><a href="?page=impressum">Impressum »</a></li>
				</ul>

Javascript function dazu:
Code: 
	function show(divid){
		if(divid == "profil"){
			document.getElementById('steckbrief').style.display = "inline";
			document.getElementById('leistungsbereich').style.display = "inline";
			document.getElementById('team').style.display = "inline";
		}
		else if(divid == "referenzen"){
			document.getElementById('betonbau').style.display = "inline";
			document.getElementById('holzbau').style.display = "inline";
			document.getElementById('stahlbau').style.display = "inline";
		}
		else if(divid == "kontakt"){
			document.getElementById('lageplan').style.display = "inline";
			document.getElementById('anschrift').style.display = "inline";
			document.getElementById('impressum').style.display = "inline";
		}
	}

Danke vielmals und mfG
Chris
 
Hi,

ich gehe einfach mal davon aus, dass du mit Unterpunkten die Punkte meinst, die durch dein Menueskript angezeigt werden (z.B. Steckbrief, Leistungsbereich, Team).

Wird ein solcher Punkt geöffnet, wird das Dokument sowieso neu geladen. Da mit der URL Parameter übergeben werden, gehe ich davon aus, dass diese auch ausgewertet werden. Anhand dieser Auswertung sollte doch auch der entsprechende Menuepunkt mit der gewünschten Formatierung ausgezeichnet werden können.

Ansonsten könntest du eventuell im onload-Event die search-Eigenschaft des location-Objekts auswerten. Je nachdem, welcher Begriff mit übergeben wurde, änderst du die Linkfarbe.

Beispiel:
Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script type="text/javascript">
  <!--
window.onload = function(){
  var strURL = window.location.search.substr(1, window.location.search.length-1);
  if((strURL.length > 0) && (strURL != "")){
    if(strURL.search(/(steckbrief|leistungsbereich|team)/) != -1){
      document.getElementById("profil").style.color = "#f00";
      document.getElementById("profil").getElementsByTagName("a")[0].style.color = "#f00";
    }else if(strURL.search(/(betonbau|holzbau|stahlbau)/) != -1){
      document.getElementById("referenzen").style.color = "#f00";
      document.getElementById("referenzen").getElementsByTagName("a")[0].style.color = "#f00";
    }else if(strURL.search(/(lageplan|anschrift|impressum)/) != -1){
      document.getElementById("kontakt").style.color = "#f00";
      document.getElementById("kontakt").getElementsByTagName("a")[0].style.color = "#f00";
    }
  }
}
 //-->
</script>
</head>
<body>
<ul class="menu">
  <li id="profil" class="upper"><a href="javascript:show('profil')">B&uuml;roprofil</a></li>
  <li id="steckbrief" class="inner"><a href="?page=steckbrief">Steckbrief »</a></li>
  <li id="leistungsbereich" class="inner"><a onclick="colorIt('profil', ['referenzen', 'kontakt']); return false;" href="?page=leistungsbereich">Leistungsbereich »</a></li>
  <li id="team" class="inner"><a href="?page=team">Team »</a></li>
  <li id="referenzen" class="upper"><a href="javascript:show('referenzen')">Referenzen</a></li>
  <li id="betonbau"><a href="?page=projekte&art=betonbau">Betonbau »</a></li>
  <li id="betonbauinplanung"><a href="?page=projekte&art=betonbau&type=inplanung">in Planung »</a></li>
  <li id="betonbauinbau"><a href="?page=projekte&art=betonbau&type=inbau">in Bau »</a></li>
  <li id="betonbaugebaut"><a href="?page=projekte&art=betonbau&type=gebaut">gebaut »</a></li>
  <li id="holzbau"><a href="?page=projekte&art=holzbau">Holzbau »</a></li>
  <li id="holzbauinplanung"><a href="?page=projekte&art=holzbau&type=inplanung">in Planung »</a></li>
  <li id="holzbauinbau"><a href="?page=projekte&art=holzbau&type=inbau">in Bau »</a></li>
  <li id="holzbaugebaut"><a href="?page=projekte&art=holzbau&type=gebaut">gebaut »</a></li>
  <li id="stahlbau"><a href="?page=projekte&art=stahlbau">Stahlbau »</a></li>
  <li id="stahlbauinplanung"><a href="?page=projekte&art=stahlbau&type=inplanung">in Planung »</a></li>
  <li id="stahlbauinbau"><a href="?page=projekte&art=stahlbau&type=inbau">in Bau »</a></li>
  <li id="stahlbaugebaut"><a href="?page=projekte&art=stahlbau&type=gebaut">gebaut »</a></li>
  <li id="jobangebote" class="upper"><a href="?page=jobs">Jobangebote</a></li>
  <li id="kontakt" class="upper"><a href="javascript:show('kontakt')">Kontakt</a></li>
  <li id="lageplan"><a href="?page=lageplan">Lageplan »</a></li>
  <li id="anschrift"><a href="?page=anschrift">Anschrift »</a></li>
  <li id="impressum"><a href="?page=impressum">Impressum »</a></li>
</ul>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hallo,

es ging eigentlich darum, dass ich die Überkategorie verfärben wollte und da wird das Dokument noch nicht neu geladen. (Ich will z.B. Profil eine andere Farbe geben, wenn der user draufklickt und die Unterpunkte öffnet, nur will er das einfach nicht machen (wie oben schon erwähnt.))

MfG
 
Hi,

versuch es mal so:
Code: 
function show(divid){
  if(divid == "profil"){
    document.getElementById('steckbrief').style.display = "inline";
    document.getElementById('leistungsbereich').style.display = "inline";
    document.getElementById('team').style.display = "inline";
    document.getElementById("profil").style.color = document.getElementById("profil").getElementsByTagName("a")[0].style.color = "#f00";
    document.getElementById("referenzen").style.color = document.getElementById("referenzen").getElementsByTagName("a")[0].style.color = "";
    document.getElementById("kontakt").style.color = document.getElementById("kontakt").getElementsByTagName("a")[0].style.color = "";
  }else if(divid == "referenzen"){
    document.getElementById('betonbau').style.display = "inline";
    document.getElementById('holzbau').style.display = "inline";
    document.getElementById('stahlbau').style.display = "inline";
    document.getElementById("profil").style.color = document.getElementById("profil").getElementsByTagName("a")[0].style.color = "";
    document.getElementById("referenzen").style.color = document.getElementById("referenzen").getElementsByTagName("a")[0].style.color = "#f00";
    document.getElementById("kontakt").style.color = document.getElementById("kontakt").getElementsByTagName("a")[0].style.color = "";
  }else if(divid == "kontakt"){
    document.getElementById('lageplan').style.display = "inline";
    document.getElementById('anschrift').style.display = "inline";
    document.getElementById('impressum').style.display = "inline";
    document.getElementById("profil").style.color = document.getElementById("profil").getElementsByTagName("a")[0].style.color = "";
    document.getElementById("referenzen").style.color = document.getElementById("referenzen").getElementsByTagName("a")[0].style.color = "";
    document.getElementById("kontakt").style.color = document.getElementById("kontakt").getElementsByTagName("a")[0].style.color = "#f00";
  }
}
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück