kostenloser Webspace werbefrei: lima-city


Onclick: display-block

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    matthias-detsch

    Kostenloser Webspace von matthias-detsch

    matthias-detsch hat kostenlosen Webspace.

    Ich habe auf meiner Seite ein etwas breites Menü und möchte es per Click auf ein Bild unsichtbar (display: none;) machen und bei einem weiteren Click auf ein anderes Bild, welches vorher sichtbar wurde, wieder sichtbar machen


    <script type='text/javascript'>
    function activate_tabContent(active_div){
    $('div#menueshower > div#menue').removeClass('show');
    $('div#menueshower > div#reverse').removeClass('notshow');
    div#menue.addClass('notshow');
    div#reverse.addclass('show');

    }
    </script>
    <script type='text/javascript'>
    function deactivate_tabContent(active_div){
    $('div#menueshower > div#reverse').removeClass('show');
    $('div#menueshower > div#menue').removeClass('notshow');
    div#menue.addClass('show');
    div#reverse.addclass('notshow');

    }

    Dies Funktioniert aber nicht, das heißt, es wird nicht umgeschaltet

    Beitrag zuletzt geändert: 15.12.2013 19:32:09 von matthias-detsch
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. ich würde da mit so vorgehen:

    dein Menü hat jetzt zb. die id navi. und dann hat du noch die beiden bilder mit den ids button1 und button2

    <div id="navi">menü</div>
    
    <img id="button1" onclick="func1();"/>
    <img id="button2" onclick="func2();" style="visibility:hidden;"/>


    und dann halt Javascript:

    function func1 (){
    document.getElementById('navi').style.visibility='hidden';
    document.getElementById('button1').style.visibility='hidden';
    document.getElementById('button2').style.visibility='visible';
    }
    
    function func2 (){
    document.getElementById('navi').style.visibility='visible';
    document.getElementById('button1').style.visibility='visible';
    document.getElementById('button2').style.visibility='hidden';
    
    }


    - fertig

    sollte eig. funktionieren wenn ich keine Tippfehler gemacht habe.
  4. Hi!

    Ich bin in JS nicht soo bewandert, aber müsstest du bei "div#menue.addClass('show');" nicht auch den jQuery-Syntax "$('div#menue'),addClass('show');" anwenden? Außerdem könntest du doch auch ".show()" und ".hide()" benutzen, damit setz jQuery eigenständig "display='hidden'". Es gibt auch Code für die Nutzung von ".toggle(showOrHide)", die ein- und ausblendet.

    Warum du den Funktionen einen Wert übergibst, den du nicht nutzt verstehe ich auch nicht so recht...

    Ich denke aber, der Fehler liegt in dem Syntax vom Zugriff auf die Elemente. Gegebenenfalls würd ich da wirklich mal mit document.getElementById ran gehen um diese Fehlerquelle auszuschließen :)

    Grüße
    things
  5. Autor dieses Themas

    matthias-detsch

    Kostenloser Webspace von matthias-detsch

    matthias-detsch hat kostenlosen Webspace.

    things schrieb:

    Warum du den Funktionen einen Wert übergibst, den du nicht nutzt verstehe ich auch nicht so recht...

    Das wr noch von früher-ein relikt aus altertümlicher zeit:wink:

    @socialcloud

    dein code funktioniert. aber ich habe eine Frage: kann man
    .style.visibility='hidden';

    durch
    .style.display='none';

    ersetzen?

    Beitrag zuletzt geändert: 17.12.2013 18:14:23 von matthias-detsch
  6. hsg-elbmarsch

    hsg-elbmarsch hat kostenlosen Webspace.

    Zwischen den beiden Eigenschaften gibts einen Unterschied:
    display: none verhindert die Darstellung eines Elements. Es nimmt so keinen Platz im Dokument ein.
    visibility: hidden macht ein Element unsichtbar, aber erhält den durch weitere Eigenschaften angegebenen Platz im Dokument.

    Siehe auch hier:
    http://www.css4you.de/visibility.html
    http://www.css4you.de/display.html
  7. Autor dieses Themas

    matthias-detsch

    Kostenloser Webspace von matthias-detsch

    matthias-detsch hat kostenlosen Webspace.

    hsg-elbmarsch schrieb:
    Zwischen den beiden Eigenschaften gibts einen Unterschied:
    display: none verhindert die Darstellung eines Elements. Es nimmt so keinen Platz im Dokument ein.
    visibility: hidden macht ein Element unsichtbar, aber erhält den durch weitere Eigenschaften angegebenen Platz im Dokument.

    Siehe auch hier:
    http://www.css4you.de/visibility.html
    http://www.css4you.de/display.html


    Das weiß ich sehr wohl, und genau das möchte ich ja auch bezwecken.
    Sonst bringt das ausblenden ja gar gar nischte
  8. hsg-elbmarsch

    hsg-elbmarsch hat kostenlosen Webspace.

    aber ich habe eine Frage: kann man

    .style.visibility='hidden';


    durch

    .style.display='none';


    ersetzen?


    Hab ich deine Frage falsch verstanden? Ja, kannst du ersetzen, allerdings unter Beachtung des Unterschieds.
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!