Søg
Avatar billede theselfimages Nybegynder
27. januar 2010 - 16:58 Der er 7 kommentarer og
1 løsning

Hjælp til lille JavaScript

Jeg har brug for lidt hjælp til et lille script, da jeg desværre ikke kan programmere - men blot forestille hvad scriptet skal kunne gøre :-)

Scriptet skal skjule/vise på følgende måde:


function showHide() {

Ved onload sættes ID: "InfoShowHide" til = display: none;

Ved onclick på et link ved navn "Info" sættes ID:
"GalleryShowHide" og "NewSnippetContainer" til = display: none;

og

"InfoShowHide" sættes til = display: block;
}

Kan det laves således, at hvis linket "Info" klikkes igen eller siden refresh'es så går den tilbage til onload tilstand?

Definer venligst linket, som vel er noget ala:

<a href="#" onclick: showHide >Info</a>
Avatar billede wanze Nybegynder
27. januar 2010 - 18:00 #1
Har lavet dig et komplet eksempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Nice sang 17:46+ Snow started falling, stuck in your car, chewing on a candy bar</title>
    </head>
    <script type="text/javascript">
        function showHide() {
            if(document.getElementById('InfoShowHide').style.display == 'none') {
                document.getElementById('InfoShowHide').style.display = 'block';
                document.getElementById('GalleryShowHide').style.display = 'none';
                document.getElementById('NewSnippetContainer').style.display = 'none';
            }
            else {
                document.getElementById('InfoShowHide').style.display = 'none';
                document.getElementById('GalleryShowHide').style.display = 'block';
                document.getElementById('NewSnippetContainer').style.display = 'block';
            }
        }
    </script>
    <style type="text/css">
    div {
        font: 'lucida grande', sans-serif;
        padding: 5px;
        margin: 5px;
        border: 1px solid #000;
        width: 150px;
        float: left;
        text-align: center;
    }
    #InfoShowHide {
        display: none;
    }
    </style>
    <body>
        <div id="InfoShowHide" style="background:#ffa">
            InfoShowHide
        </div>
        <div id="GalleryShowHide" style="background:#faf">
            GalleryShowHide
        </div>
        <div id="NewSnippetContainer" style="background:#aff">
            NewSnippetContainer
        </div>
        <a href="#" onclick="showHide();">Info</a>
    </body>
</html>
Avatar billede wanze Nybegynder
27. januar 2010 - 18:01 #2
Haha, titlen var så et notat til mig selv. Det må du godt se bort fra. ;-)
Avatar billede wanze Nybegynder
27. januar 2010 - 18:03 #3
Hov, man skal vist klikke 2 gange første gang - har lige fikset det:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
    </head>
    <script type="text/javascript">
        function showHide() {
            if(document.getElementById('InfoShowHide').style.display == 'block') {
                document.getElementById('InfoShowHide').style.display = 'none';
                document.getElementById('GalleryShowHide').style.display = 'block';
                document.getElementById('NewSnippetContainer').style.display = 'block';
            }
            else {
                document.getElementById('InfoShowHide').style.display = 'block';
                document.getElementById('GalleryShowHide').style.display = 'none';
                document.getElementById('NewSnippetContainer').style.display = 'none';
            }
        }
    </script>
    <style type="text/css">
    div {
        font: 85% 'lucida grande', sans-serif;
        padding: 5px;
        margin: 5px;
        border: 1px solid #000;
        width: 150px;
        float: left;
        text-align: center;
    }
    #InfoShowHide {
        display: none;
    }
    </style>
    <body>
        <div id="InfoShowHide" style="background:#ffa">
            InfoShowHide
        </div>
        <div id="GalleryShowHide" style="background:#faf">
            GalleryShowHide
        </div>
        <div id="NewSnippetContainer" style="background:#aff">
            NewSnippetContainer
        </div>
        <a href="#" onclick="showHide();">Info</a>
    </body>
</html>
Avatar billede theselfimages Nybegynder
27. januar 2010 - 18:46 #4
Det er jo absolut genialt og virker perfekt! Faktisk ser det også ret simpelt ud, så nu har jeg lært noget :-)

Tusind tak for hjælpen! Smid et svar!
Avatar billede theselfimages Nybegynder
27. januar 2010 - 18:51 #5
En smart tillægsfeature kunne være, at når der klikkes første gang på linket "Info" så skifter teksten til at der står "Back", og når man klikker anden gang blir det til "Info" igen...

Blot en tanke...
Avatar billede wanze Nybegynder
27. januar 2010 - 19:00 #6
Det er jo også ganske simpelt.

I den første if smider du: document.getElementById('InfoLink').innerHTML = 'Info'; og i else: font=Courier]document.getElementById('InfoLink').innerHTML = 'Back';[/font]

Derudover skal du lige smide id="InfoLink" på dit link.
Avatar billede wanze Nybegynder
27. januar 2010 - 19:02 #7
Jeg er lavet af fail.

Det er jo også ganske simpelt.

I den første if smider du: document.getElementById('InfoLink').innerHTML = 'Info'; og i else: document.getElementById('InfoLink').innerHTML = 'Back';

Derudover skal du lige smide id="InfoLink" på dit link.
Avatar billede theselfimages Nybegynder
27. januar 2010 - 19:19 #8
Genialt! Mange tak :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:46 Messinger virker ikke på Windows 10 og Windows 11 Af eksmojo i Windows
I går 17:32 Jeg kan ikke opdatere min iPad til ios 26.4.1. Af Bettina i Apps til iOS
I går 08:32 Office pakke LTSC vs Retail? Af Don G i Office & Kontorpakker
10/0421:19 Lydindstilling Prosonic TV Af TageArent i Fjernsyn & projektorer
10/0415:37 Sort skærm Af mort1 i Windows
White papers
Flere white papers »