Notifikationer

Markér alle som læst Log ud

cronaldo Nybegynder

14. december 2008 - 00:22 Der er 8 kommentarer og
1 løsning

Ændr display på flere forskellige <div> ved ét klik.

Hej eksperter.

Jeg har et problem. Jeg har en boks, der skal vises flere forskellige ting med, som er lavet pr. fanebladsprincip. Der er altså 4 forskellige "tabeller" med indhold. Der skal dog kun vises éen ad gangen efter hvilket link man trykker på! Altså skal der sættes display=inline på éen og display=none på 4, når man trykker på en knap. Som fx:

Man trykker på "om os", hvilket gør at flg. skal ske:
tabel nr. 1 -> skjul
tabel nr. 2 -> skjul
tabel nr. 3 -> vis
tabel nr. 4 -> skjul

Håber det er forståeligt :)

Synes godt om

kalp Novice

14. december 2008 - 02:06 #1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<script>
var oActive = null;
function HideOrShowDiv(itemno) {
if (oActive) oActive.style.display = "none";
oActive = document.getElementById('D_'+itemno);
oActive.style.display = "block";
}
</script>

Eksempel på div <br />
<a href="java script:HideOrShowDiv(1001)">Link1</a>
<div id="D_1001" style="display:none">
Tekst1
</div>

<br />
<a href="java script:HideOrShowDiv(1002)">Link2</a>
<div id="D_1002" style="display:none">
Tekst2
</div>

<br />
<a href="java script:HideOrShowDiv(1003)">Link3</a>
<div id="D_1003" style="display:none">
Tekst3
</div>
</BODY>
</HTML>

Synes godt om

cronaldo Nybegynder

14. december 2008 - 12:29 #2

kan man så gøre sådan at scriptet ændrer class på alting også :) ?

Altså hvis man trykker på "link1" så bliver class på denne sat ="current" og på de andre skal det være class="" .. kan det tilføjes :) ?

Synes godt om

cronaldo Nybegynder

14. december 2008 - 12:37 #3

Der er éet enkelt problem .. hvordan får jeg scriptet til at "se", at den første, D_1001, er sat til "display: inline;" sådan at den lukker den første gang, man trykker ? :)

Synes godt om

zips Juniormester

14. december 2008 - 12:43 #4

Er det noget i denne stil du søger http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

Synes godt om

cronaldo Nybegynder

14. december 2008 - 12:45 #5

ja, det er det nemlig lige præcis :) .. kalp's script virker helt perfekt, det eneste den skal er faktisk at skifte class, så er det helt perfekt :)

Synes godt om

kalp Novice

14. december 2008 - 15:08 #6

så skal det være således.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<style type="text/css">
.current {
display:block;
}
.none{
display:none;
}

</style>

<script>
var oActive = null;
function HideOrShowDiv(itemno) {
if (oActive) oActive.className ="none";
oActive = document.getElementById('D_'+itemno);
oActive.className = "current";
}
</script>

Eksempel på div <br />
<a href="java script:HideOrShowDiv(1001)">Link1</a>
<div id="D_1001" class="none">
Tekst1
</div>

<br />
<a href="java script:HideOrShowDiv(1002)">Link2</a>
<div id="D_1002" class="none">
Tekst2
</div>

<br />
<a href="java script:HideOrShowDiv(1003)">Link3</a>
<div id="D_1003" class="none">
Tekst3
</div>
</BODY>
</HTML>

Synes godt om

cronaldo Nybegynder

14. december 2008 - 17:24 #7

Jeg har brugt det link zips gav .. Jeg ved ikke hvordan det ser ud med, at vi deler pointene - vil I synes, det er fair? :)

Synes godt om

zips Juniormester

14. december 2008 - 19:02 #8

Ingen point til mig :)

Synes godt om

cronaldo Nybegynder

14. december 2008 - 23:02 #9

det er i orden :) .. tak for hjælpen begge to!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
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

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS