Vereinfachen eines Codes

[silv20]

<script type="text/javascript">
function menu1() {
 if(document.getElementById('menu1').style.display=='none') {
  document.getElementById('menu1').style.display='block';
  document.getElementById('menu2').style.display='none';
  document.getElementById('menu3').style.display='none';
  document.getElementById('menu4').style.display='none';
  document.getElementById('menu5').style.display='none';
  document.getElementById('menu6').style.display='none';
  document.getElementById('menu7').style.display='none';
  document.getElementById('menu8').style.display='none';
  document.getElementById('menu9').style.display='none';
  document.getElementById('menu10').style.display='none';
 }
}

<a href="#" onClick="menu1()">HOME</a>

ich würde gerne den oberen code vereinfachen, so das egal was im unteren onClick steht er immer nur dieses einblendet und alle anderen ausblendet.

ausblenden könnte ich mir vorstellen das ich einfach
all.document.getElementById.style.display='none'
mach. hab es zwar schon ausprobiert hat leider nicht funktioniert aber so in die richtung müsste es doch gehen.

für eure hilfe wäre ich euch sehr dankbar.

danke schon mal im vorraus und grüße
silv

 

[Sven Mintel]

Moin silv,

das wäre bspw. eine Variante:

<script type="text/javascript">
<!--
function menu(index,
              prefix,
              range)
{
  var prefix  = (typeof range=='undefined')?'menu':String(prefix),
      range   = (typeof range=='undefined')?[1,5]:range;

 if(document.getElementById(prefix+index).style.display=='none')
 {
  for(var i=range[0];i<=range[1];++i)
  {
    document.getElementById(prefix+i).style.display=(index==i)?'block':'none';
  }
 }
}
//-->
</script>

<a href="#" onClick="menu(1)">HOME</a>

...
Es gibt nur eine einzige Funktion, und der interessante Wert(die Zahl in der Menu-ID) wird als Parameter der Funktion offeriert.

 

[mafioso]

hi, wenn du ein javascript framework verwenden würdest (z.b. jQuery), kannst du das ganze noch einfacher machen. Z.B. kannst du alle deine Menü Elemente auf einmal ansprechen und diese verstecken lassen:

$('.menu li').hide();//sucht nach einem element mit der css klasse "menu" und versteckt alle dazugehörige "li" elemente