Notifikationer

Markér alle som læst Log ud

cronaldo Nybegynder

24. januar 2009 - 18:57 Der er 8 kommentarer og
1 løsning

Hide/Show <div>'s når man klikker (lavet af OleBole)

Hej eksperter!
Jeg har for nogle måneder siden fået lavet flg. script af OleBole..
Der er en <div id="head_1"></div> og en <div id="text_1"></div> der fra start vises (display: block;) .. Problemet er, at det registrerer mit script ikke, så hvis jeg fx trykker på "head_3" så viser den ganske rigtigt text_3, MEN den skjuler ikke text_1 .. hvis jeg tilgengæld trykker på head_1 først (selvom text_1 jo er vist onLoad) så virker det hele..

Scriptet ser ud som flg.:

<script type="text/javascript">
function visElement(oHead) {
if (oActive) {
oActive[0].style.display = "none";
oActive[1].style.color = "";
}
var sId = oHead.getAttribute("id").split("_")[1];
oActive = [document.getElementById("text_"+sId), oHead];
oActive[0].style.display = "block";
oActive[1].style.color = "#f63da1";
}

window.onload = function() {
oActive = [document.getElementById("text_1"), document.getElementById("head_1")];
}
</script>

På forhånd tak
C^Ronaldo

Synes godt om

olebole Juniormester

24. januar 2009 - 21:14 #1

<ole>

Læg lige et link til et eksempel =)

/mvh
</bole>

Synes godt om

cronaldo Nybegynder

24. januar 2009 - 21:28 #2

det kan jeg ikke lige umiddelbart, min side er lige "hemmelig" ? :/

Synes godt om

cronaldo Nybegynder

24. januar 2009 - 21:28 #3

i øvrigt skal det nævnes at det virkede på den anden server?

Synes godt om

cronaldo Nybegynder

24. januar 2009 - 21:28 #4

nej, det gjorde det ikke, min fejl :(

Synes godt om

tjens Nybegynder

25. januar 2009 - 11:15 #5

Jeg har tastet mig et eksempel, og kan kun se at Oles nydeligt simple eksempel virker:

http://tjens.dk/eksperten/TextDiv_none.html
(højreklik og se source)

Du må have glemt noget vedr. navngivning af id'er eller onclick definitioner.

PS: Jeg kom til at lege med CSS så det samtidig blev et fanebladssystem.

Synes godt om

olebole Juniormester

25. januar 2009 - 18:13 #6

tjens >> den er ikke helt fjong i FF - og uden DTD disables hele CSS' box-model i IE. Denne holder til gengæld:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TextDiv display </title>
<style>

body {
font:100% sans-serif;
}

.headDiv {
float: left;
border: 2px solid gray;
border-bottom: 0;
padding: 4px;
margin: 0 2px -4px 2px;
z-index: 1;
background-color: #DDDDDD;
font-size:120%;
position: relative;
}
.tekstDiv {
border: 2px solid green;
padding: 4px;
margin: 2px;
display : none;
z-index: 10;
background-color: palegreen;
position: relative;
}
.clear {
height: 0;
overflow: hidden;
clear: both;
}
</style>
<script type="text/javascript">

var oActive = null;

function visElement(oHead) {
if (oActive) {
oActive[0].style.display = "none";
oActive[1].style.backgroundColor = "#DDDDDD";
oActive[1].style.borderColor = "gray";
oActive[1].style.zIndex = 1;
}
var sId = oHead.getAttribute("id").split("_")[1];
oActive = [document.getElementById("text_"+sId), oHead ];
oActive[0].style.display = "block";
oActive[1].style.backgroundColor = "palegreen";
oActive[1].style.borderColor = "green";
oActive[1].style.zIndex = 11;
}

window.onload = function() {
visElement( document.getElementById("head_1") );
}
</script>
</head>
<body>
<br>
<div id="head_1" class="headDiv" onclick="visElement(this)">Head 1</div>
<div id="head_2" class="headDiv" onclick="visElement(this)">Head 2</div>
<div id="head_3" class="headDiv" onclick="visElement(this)">Head 3</div>
<div class="clear"> </div>

<div id="text_1" class="tekstDiv"><p>Tekst 1</p></div>
<div id="text_2" class="tekstDiv"><p>Tekst 2</p></div>
<div id="text_3" class="tekstDiv"><p>Tekst 3</p></div>
</body></html>

- men jeg er enig i, spørgeren har begået en fejl, somewhere =)

Synes godt om

olebole Juniormester

25. januar 2009 - 18:14 #7

PS: Husk, 'grå' staves 'gray' ... ikke 'grey' ;o)

Synes godt om

olebole Juniormester

25. januar 2009 - 18:17 #8

- og så giver de her marginer nok lidt mere mening:

.headDiv {
float: left;
border: 2px solid gray;
border-bottom: 0;
padding: 4px;
margin: 0 2px -2px 2px;
z-index: 1;
background-color: #DDDDDD;
font-size:120%;
position: relative;
}
.tekstDiv {
border: 2px solid green;
padding: 4px;
margin: 0 2px;
display : none;
z-index: 10;
background-color: palegreen;
position: relative;
}

Synes godt om

cronaldo Nybegynder

13. oktober 2010 - 14:35 #9

lukker :)

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