div ein-/ausblenden und classe ändern

[Bernd]

hi,  mit folgenden code blende ich einen div ein- bzw. aus:

var status=0;

function showhide(x)
{
  if(status==0){
    document.getElementById('subnav' + x).style.display = 'block';
    status=1;
  }
  else{
    document.getElementById('subnav' + x).style.display = 'none';
    status=0;
  }
}

das funktioniert wunderbar nur möchte ich jetzt gleichzeitig noch die klasse des links auf den ich zum ein-ausblenden klicke ändern.

ich habs jetzt so:
onClick="showhide(1); className='active';"

aber ich möchte das ändern der klasse gern in die funktion mit einbauen.

kann mir jemand nen tipp geben?

danke und gruß
Bernd

[wahsaga]

hi,

aber ich möchte das ändern der klasse gern in die funktion mit einbauen.

wo ist das problem?

auf das objekt style unterhalb des elementes zuzugreifen, schaffst du - dann solltest du es doch ebenso schaffen, auf eine unterhalb des elementes liegende eigenschaft namens className zuzugreifen.

gruß,
wahsaga

[Bernd]

hi wahsaga;

wo ist das problem?

ich kriegs nicht hin ;-)

auf das objekt style unterhalb des elementes zuzugreifen, schaffst du

ja, das ist nciht das problem.

• dann solltest du es doch ebenso schaffen, auf eine unterhalb des elementes liegende eigenschaft namens className zuzugreifen.

nein, leider nicht, vielelicht hab ich auch nur einen denkfehler aber irgendwie stehe ich auch dem schlauch...

ich habs so versucht:
function showhide(x)
{
  if(status==0){
    document.getElementById('subnav' + x).style.display = 'block';
document.getElementById('subnav' + x).this.className='active'
    status=1;
  }
  else{
    document.getElementById('subnav' + x).style.display = 'none';
    status=0;
  }
}

klappt aber nicht ;-(

[Bernd]

ok, denkfehler!

ich habs jetzt so:
document.getElementById('subnav' + x).className='active'

aber das ist ja nicht das was ich will. ich will ja nicht die klasse vom div ändern sondern die des a-tags auf das ich klicke.

[wahsaga]

hi,

document.getElementById('subnav' + x).className='active'

aber das ist ja nicht das was ich will. ich will ja nicht die klasse vom div ändern sondern die des a-tags auf das ich klicke.

dann übergebe die referenz auf dieses a beim aufruf der funktion als parameter (this benutzen), und spreche unterhalb des durch diesen parameter referenzierten objektes die eigenschaft className an.

gruß,
wahsaga

[Bernd]

dann übergebe die referenz auf dieses a beim aufruf der funktion als parameter (this benutzen), und spreche unterhalb des durch diesen parameter referenzierten objektes die eigenschaft className an.

wie mach ich das?

[wahsaga]

hi,

dann übergebe die referenz auf dieses a beim aufruf der funktion als parameter (this benutzen), und spreche unterhalb des durch diesen parameter referenzierten objektes die eigenschaft className an.

wie mach ich das?

http://de.selfhtml.org/javascript/sprache/funktionen.htm lesen, ausprobieren, bei problemen _konrekt_ wieder nachfragen.

gruß,
wahsaga

[Bernd]

ok, ich hab's jetzt so:

------
var status=0;

function showhide(x,a)
{
  if(status==0){
    document.getElementById('subnav' + x).style.display = 'block';
a.className='active';
    status=1;
  }
  else{
    document.getElementById('subnav' + x).style.display = 'none';
a.className='';
    status=0;
  }
}

--
onClick="showhide(1,this);"
------

funktioniert, danke für die hilfe!

[Bernd]

ok, das klappt wie gesagt nur jetzt habe ich das problem das, gern mehrere div's aus-/einblenden möchte aber immer nur einene zur zeit. also das ganze soll ein "aufklpptmenu" werden und wenn ich einen menupunkt wähle soll ein untermenu aufklappen. wenn ich nun aber einen anderen menupunkt wähle soll der zuvor aufgeklappte wieder verschwinden und der neue aufkleppen.

hast du da noch nen tipp für mich wie ich das nun realisieren kann?

Bernd.

[wahsaga]

hi,

also das ganze soll ein "aufklpptmenu" werden und wenn ich einen menupunkt wähle soll ein untermenu aufklappen. wenn ich nun aber einen anderen menupunkt wähle soll der zuvor aufgeklappte wieder verschwinden und der neue aufkleppen.

hast du da noch nen tipp für mich wie ich das nun realisieren kann?

enweder "merkst" du dir immer in einer variable, welcher menüpunkt zuvor aufgeklappt wurde - und schließt dann diesen wieder, bevor du einen anderen öffnest;

oder du gehst in einer schleife einfach über _alle_ in frage kommenden divs - und prüfst, ob der aktuelle mit dem, den du einblenden wilst, identisch ist. wenn ja, wird eingeblendet, wenn nein, ausgeblendet - ohne auf den derzeitigen zustand zu achten.

gruß,
wahsaga

[Bernd]

ok, ich finde die variante mit dem "merken" glaube ich einfacher.
ich habs so probiert:

---
var status=0;

function showhide(x,a)
{

if(status==0){
current= 'subnav' + x;
    document.getElementById('subnav' + x).style.display = 'block';
a.className='active';
    status=1;
  }
  else{

document.getElementById(current).style.display = 'none';
if(!current){
    document.getElementById('subnav' + x).style.display = 'none';
} else {
    document.getElementById('subnav' + x).style.display = 'block';
}
a.className='';
    status=0;
  }
}
---

das funktioniert auch aber nur beim ersten mal. also wenn ich den einen menupunkt aufklappe und dnan einen anderen wähle klappt der erste wieder zu und der zweite auf  -also wie gewünscht nur wenn ich dann weiter klicke bleibt der zweite offen und der dritte offnet sich auch ;-(

[wahsaga]

hi,

if(status==0){
current= 'subnav' + x;

das funktioniert auch aber nur beim ersten mal.

beim zweiten mal ist status nicht mehr gleich 0 - also wird dieser zweig nicht bearbeitet, also auch current nicht angepasst.

gruß,
wahsaga

[Bernd]

beim zweiten mal ist status nicht mehr gleich 0 - also wird dieser »»zweig nicht bearbeitet, also auch current nicht angepasst.

ja, aber wie kann ich das umgehen? ich kann ja status nicht auf null setzten weil ich das sonst nicht wieder zuklappen kann.

[wahsaga]

hi,

ja, aber wie kann ich das umgehen? ich kann ja status nicht auf null setzten weil ich das sonst nicht wieder zuklappen kann.

status brauchst du m.E. gar nicht.

ich würde in etwa so vorgehen:

var vorherigesElement = false;

function einblenden(Element) {
  if(vorherigesElement) {
    [vorherigesElement ausblenden]
  }
  [Element einblenden]
  vorherigesElement = Element;
}

gruß,
wahsaga

[Bernd]

ok, super!

ich hab's jetzt so:

---
var current = false;

function showhide(x,a) {
  if(current) {
   document.getElementById(current).style.display = 'none';
  }
  document.getElementById('subnav' + x).style.display = 'block';
  a.className='active';
  current = 'subnav' + x;
}

----

das funktioniert vom feinsten! das einzige problem was ich jetzt noch habe ist das der style sich nicht wieder ändert.

[wahsaga]

hi,

das funktioniert vom feinsten! das einzige problem was ich jetzt noch habe ist das der style sich nicht wieder ändert.

was meinst du?
dass der link jetzt die zugewiesene klasse behält?
wenn das nicht gewollt ist, musst du dies auf die gleiche weise wieder rückgängig machen, wie du auch display von block wieder auf none setzt: merken, welcher link der vorherige war, dessen className wieder auf "" (nichts) setzen, etc.

gruß,
wahsaga

[Bernd]

ok, ich hab den links jetzt noch ne ID verpasst und mein script jetzt wie folgt angepasst:

--
function showhide(x,a) {
  if(currentSubnav) {
   document.getElementById(currentSubnav).style.display = 'none';
   document.getElementById(currentLink).className = '';

}
  document.getElementById('subnav' + x).style.display = 'block';
  a.className='active';
  currentSubnav = 'subnav' + x;
  currentLink = 'link' + x;

}
--

klappt ganz gut so, hast du noch nen verbesserungsvorschlag oder ist das so ok?

ich sag schon mal danke für die hilfe!

[wahsaga]

hi,

ok, ich hab den links jetzt noch ne ID verpasst

die brauchst du eigentlich nicht, du kannst weiterhin mit this arbeiten - das spart dir ein getElementById (letzteres "kostet").

gruß,
wahsaga

[Bernd]

die brauchst du eigentlich nicht, du kannst weiterhin mit this »»arbeiten - das spart dir ein getElementById (letzteres "kostet").

aber woher weiss ich dann welcher link vorher dran war und nun keinen style mehr haben soll?

[wahsaga]

hi,

die brauchst du eigentlich nicht, du kannst weiterhin mit this »»arbeiten - das spart dir ein getElementById (letzteres "kostet").

aber woher weiss ich dann welcher link vorher dran war und nun keinen style mehr haben soll?

na in dem du dir die referenz auf den aktuellen link - das an die funktion übergebene this - in deiner merker-variable ablegst.

man kann schließlich nicht nur zahlen oder strings in variablen ablegen, sondern genauso gut referenzen auf objekte.

gruß,
wahsaga

[Bernd]

ja ber so funktioniert es nciht:

function showhide(x,a) {
  if(currentSubnav) {
   document.getElementById(currentSubnav).style.display = 'none';

a.className='';
  }
  document.getElementById('subnav' + x).style.display = 'block';
  a.className='active';
  currentSubnav = 'subnav' + x;
  currentLink = 'link' + x;

}

sobald ich einen anderen anklicke ist doch this nicht mehr this sondern that ;-)

[Bernd]

ah ok, jetzt hab ich's ;-)

var currentSubnav = false;

function showhide(x,a) {
  if(currentSubnav) {
   document.getElementById(currentSubnav).style.display = 'none';
   currentLink.className='';
  }
  document.getElementById('subnav' + x).style.display = 'block';
  a.className='active';
  currentSubnav = 'subnav' + x;
  currentLink = a;

}
---------

so geht's oder?
vielen dank noch mal und gruß aus hamburg!