✔ 3 Button Menü erstellen

Jo..kann man, .... ändere den className des betreffenden Elementes statt der src des Bildes. Dann definiere noch die entsprechenden Klassen, fertitsch.
 
Code: 
document.getElementById('idDesElements').className='andererKlassenname';

Dieses Board besitzt übrigens auch eine Suchfunktion.
Abgesehen davon gehört das Ändern von Element-Attributen zum kleinen JS-1x1, da solltest du dich mal ein wenig einlesen.
 
Ich weiß, der Thread ist Ur-Alt.

Allerdings bräuchte ich dieses Script an 2 verschiedenen stellen. Problem hierbei ist, wenn in meiner Horizontalen Navigation ein Element angeklickt ist und er als "active" angezeigt wird und ich im anderen Menue auf ein Element klicke wird das Element in der Horizontalen Navigation auf Normal geswitcht.

Wie bekomme ich das in Griff? Die Funktion ein zweites mal einbinden und alles was btn heißt ,umbenennen, funktioniert nicht. Dann funktioniert nur eine der beiden Funktionen.

Vielen Dank im voraus!

Grüße
Sascha
 
Hi,

du könntest eine Art Pseudo-Objekt erstellen, in dem die Variablen lokal definiert sind. Als Parameter übergibst du die ID des jeweiligen Menüs.

Ein Beispiel mit CSS-Klassen für die unterschiedlichen Zustände:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal,
#nav02 .normal{
  color: #f00;
}

#nav01 .active,
#nav02 .active{
  color: #00f;
}

#nav01 .hover,
#nav02 .hover{
  color: #0f0;
}
-->
</style>
<script type="text/javascript">
  <!--
function qpMenu(options){
  var menu = {
    pattern: /(normal|hover|active)/i
  };

  for(var key in options)
    menu[key] = options[key];

  menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName("button")
                                   : document.getElementById(menu.id).getElementsByTagName("button");

  for(var b=0, bLen=menu.btns.length; b<bLen; b++){
    menu.btns[b].onmouseover = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'hover');
      }
    };

    menu.btns[b].onmouseout = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'normal');
      }
    };

    menu.btns[b].onclick = function(){
      if(menu.clicked){
        menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
      }
      this.className = this.className.replace(menu.pattern, 'active');
      menu.clicked = this;
    };
  }
}

window.onload = function(){
  qpMenu({
  	id: 'nav01'
  });
  qpMenu({
  	id: 'nav02'
  });
}
 //-->
</script>
</head>
<body>
<div id="nav01">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
<div id="nav02">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
</body>
</html>
Ciao
Quaese
 
Funktioniert soweit super! Danke dir.

Nur mein Problem ist, dass auch jetzt alle Divs im "Normalzustand" sind. Ich möchte das erste Element gerne direkt beim Laden der Page als "active" haben.

Gibt es da eine Möglichkeit?

Grüße und Vielen Dank!
Sascha

EDIT:

Ich merke gerade das Problem, dass ich nur diverse Farben ändern kann. Ich habe aber für jeden Button ein anderes Hintergrundbild sowie andere Abmaße. Sprich ich kann nicht alles in "navi01" packen. Wenn ich alles trenne um meine Bilder zu haben, taucht ein Problem auf. Sobald ich den zweiten Button klicke um ihn auf "active" zu schalten, bleibt der erste weiterhin active.
 
Zuletzt bearbeitet:
Hi,

um unterschiedliche Eigenschaften zuzuweisen, sollte CSS ausreichen. Es müssen die MenuItems nur mit den gewünschten Klassen versehen werden.

Um bestimmte MenuPunkte programmatisch aktiv setzen zu können, kann eine entsprechende öffentliche (public) Methode zur Verfügung gestellt werden. Diese nimmt den Index des Punktes entgegen, der angewählt sein soll und setzt den notwendigen Zustand.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal{
  color: #f00;
}
#nav01 .active{
  color: #0f0;
}
#nav01 .hover{
  color: #00f;
}


#nav02 .eins,
#nav02 .zwei,
#nav02 .drei{
	border: 1px solid #000;
}

#nav02 .eins{
  width: 50px;
  height: 20px;
}
#nav02 .zwei{
  width: 60px;
  height: 30px;
}
#nav02 .drei{
  width: 40px;
  height: 40px;
}

#nav02 .eins.normal{
  color: #f00;
  background: url(bild1.png) 0 0 no-repeat;
}
#nav02 .zwei.normal{
  color: #0f0;
  background: url(bild2.png) 0 0 no-repeat;
}
#nav02 .drei.normal{
  color: #00f;
  background: url(bild3.png) 0 0 no-repeat;
}

#nav02 .eins.active{
  color: #000;
  background: url(bild1_active.png) 0 0 no-repeat;
}
#nav02 .zwei.active{
  color: #0cf;
  background: url(bild2_active.png) 0 0 no-repeat;
}
#nav02 .drei.active{
  color: #fc0;
  background: url(bild3_active.png) 0 0 no-repeat;
}

#nav02 .eins.hover{
  color: #cc0;
  background: url(bild1_hover.png) 0 0 no-repeat;
}
#nav02 .zwei.hover{
  color: #c0c;
  background: url(bild2_hover.png) 0 0 no-repeat;
}
#nav02 .drei.hover{
  color: #0cc;
  background: url(bild3_hover.png) 0 0 no-repeat;
}
-->
</style>
<script type="text/javascript">
  <!--
function qpMenu(options){
  var menu = {
    pattern: /(normal|hover|active)/i,
    tag: 'button'
  };

  for(var key in options)
    menu[key] = options[key];

  menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName(menu.tag)
                                   : document.getElementById(menu.id).getElementsByTagName(menu.tag);

  for(var b=0, bLen=menu.btns.length; b<bLen; b++){
    menu.btns[b].onmouseover = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'hover');
      }
    };

    menu.btns[b].onmouseout = function(){
      if(menu.clicked != this){
        this.className = this.className.replace(menu.pattern, 'normal');
      }
    };

    menu.btns[b].onclick = function(){
      _setActive(this);
    };
  }
  
  // private
  var _setActive = function(menuItem){
    if(menu.clicked){
      menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
    }
    menuItem.className = menuItem.className.replace(menu.pattern, 'active');
    menu.clicked = menuItem;
  }
  
  // public
  menu.setActive = function(index){
    _setActive(menu.btns[index]);
    return menu;
  }
  
  return menu;
}

window.onload = function(){
  qpMenu({
    id: 'nav01',
    tag: 'button'
  });
  qpMenu({
    id: 'nav02',
    tag: 'div'
  }).setActive(0);
}
 //-->
</script>
</head>
<body>
<div id="nav01">
  <button class="normal">eins</button>
  <button class="normal">zwei</button>
  <button class="normal">drei</button>
</div>
<div id="nav02">
  <div class="eins normal">eins</div>
  <div class="zwei normal">zwei</div>
  <div class="drei normal">drei</div>
</div>
</body>
</html>
Das Script wurde auch dahin gehend erweitert, dass der Pseudoklasse der Tag-Name der MenuPunkte übergeben werden kann.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück