Søg
Avatar billede msoee Nybegynder
19. januar 2005 - 18:59 Der er 21 kommentarer og
1 løsning

CSS: Avanceret "vis / skjul indhold i DIV"?

Ønsker hjælp til et script der "viser / skjuler" indhold i en div

Det skal fungere på følgende måde:

[knap1] [knap2] [knap3] [knap4]

Knap1-div's inhold vist her...
bla bla bla bla bla bla


Jeg ønsker da sådan at hvis jeg trykker på knap 2 skjuler den knap 1's indhold og viser da knap 2's - håber i forstår :)

jeg vil tro jeg skal smide 4 divs oven i hinanden på en eller anden måde men kan ikke overskue det... Vil nemlig gerne være fri for at have for mange sider knyttet til mit site og kunne derfor se det smarte i at hente indholdet på den måde :)

Håber i kan hjælpe!

Mvh Michael
Avatar billede msoee Nybegynder
19. januar 2005 - 21:47 #1
Har lige et ekstra spørgsmål :)

Hvad skal jeg adde til BODY {} i mit stylesheet for konstant at vise vertical scrollbar?
Avatar billede dotcom1 Nybegynder
19. januar 2005 - 21:49 #2
Til ekstraspørgsmålet: Prøv disse:

    overflow:scroll;
    overflow-x: auto;
    overflow:-moz-scrollbars-vertical;
Avatar billede msoee Nybegynder
19. januar 2005 - 21:53 #3
super ;) mange tak... Du har ikke en ide til det andet? Har et show / hide script der virker - men det er ikke lavet sådan at hvis jeg trykker på knap 2 så gemmer den knap 1's div og viser sin egen
de kommer bare oven i hinanden :(
Avatar billede dotcom1 Nybegynder
19. januar 2005 - 22:12 #4
Desværre - vidste kun det med scrollbars. Der kommer sikkert snart en haj forbi, der kan det dér med show/hide... :)
Avatar billede steen_hansen Forsker
19. januar 2005 - 22:16 #5
Du vil have noget tekst vist, hvis du holder musen hen over knapperne, eller trykker på dem? Hvis det er sådan, som jeg har forstået det, så har jeg set masser af sider med denne funktion. Kan ikke lave det selv, men jeg kan finde frem til dem, hvis jeg får lidt tid :)
Avatar billede msoee Nybegynder
19. januar 2005 - 22:18 #6
håber jeg da :)

Som det ser ud lige nu bruger jeg følgende system til det:

<script>
function toggleGallery(recordID) {
  objRecord = GetElement(recordID);
  objRecord.style.visibility = (objRecord.style.visibility=="visible" ? "hidden" : "visible");
}
function toggleView(recordID) {
  objRecord = GetElement(recordID);
  objRecord.style.display = (objRecord.style.display=="block" ? "none" : "block");}

function GetElement(strElement) {
        if (document.getElementById) {
                // IE5+, Netscape 6, Mozilla
                return (document.getElementById(strElement));}
        else if (document.all) {
                // IE4
                return (eval("document.all." + strElement));}
        else if (document.layers) {
                // Netscape 4
                return (eval("document." + strElement));}
        else {
                // Crap!
                return (null);}
}
</script>


<img src="images/knap.jpg" onclick="toggleView('VALGFRI-DIV');">
   


<div id="VALGFRI-DIV"><div id="overskrift">
Indhold lige her :P
</div></div>
Avatar billede msoee Nybegynder
20. januar 2005 - 10:43 #7
Ingen der har noget at sige? Har seriøst brug for det :)
Avatar billede dotcom1 Nybegynder
20. januar 2005 - 11:49 #8
Har lige søgt lidt her på Eksperten og der er da dukket et par spørgsmål frem, der minder meget om dit. Måske kan du bruge løsningerne fra disse:

http://eksperten.dk/spm/355863

http://eksperten.dk/spm/305456

http://eksperten.dk/spm/436135
Avatar billede dotcom1 Nybegynder
20. januar 2005 - 14:26 #9
Måske kan du bruge en af disse: http://www.youngpup.net/2001/ypslideoutmenus/examples Jeg tænker især på eksempel nr. 2 og 3...
Avatar billede roenving Novice
30. januar 2005 - 15:32 #10
Måske:

function toggleView(recordID) {
  elms = document.getElementsByTagName('DIV');
  for(i=0;i<elms.length;i++)
    if(elms[i].id.indexOf('knapdiv')==0)
      elsm[i].style.display = "none";
  objRecord = GetElement(recordID);
  objRecord.style.display = (objRecord.style.display=="block" ? "none" : "block");
}

-- og så skal dine divs have id="knapdiv1", id="knapdiv2" osv. !-)
Avatar billede msoee Nybegynder
31. januar 2005 - 15:10 #11
Hei roenving...

Lader ikke helt til at fungere...

Mine knapper skal stadig tilføres linjen: onclick="toggleView('knapdiv1');" (hvor knapdiv1 så skal erstattes med knapdiv2 osv på de andre knapper)

ikke sandt? Lader nemlig ikke rigtigt til at der sker noget når jeg trykker...
Avatar billede roenving Novice
31. januar 2005 - 15:23 #12
Jo, selvfølgelig !-)
Avatar billede msoee Nybegynder
31. januar 2005 - 15:37 #13
Har lavet et test eksempel til scriptet - koden skulle gerne være så den er ligetil at smide ind i et html dokument...

----------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test Show/Hide </TITLE>
<script type="text/javascript">
function toggleView(recordID) {
  elms = document.getElementsByTagName('DIV');
  for(i=0;i<elms.length;i++)
    if(elms[i].id.indexOf('knapdiv')==0)
      elsm[i].style.display = "none";
  objRecord = GetElement(recordID);
  objRecord.style.display = (objRecord.style.display=="block" ? "none" : "block");
}
</script>
</HEAD>

<BODY>

<a href="#" onclick="toggleView('knapdiv1');">Knap 1</a>
<a href="#" onclick="toggleView('knapdiv2');">Knap 2</a>
<a href="#" onclick="toggleView('knapdiv3');">Knap 3</a>

<div id="knapdiv1">
    <strong>Overskrift 1</strong>
    <p>INDHOLD 1</p>
</div>

<div id="knapdiv2">
    <strong>Overskrift 2</strong>
    <p>INDHOLD 2</p>
</div>

<div id="knapdiv3">
    <strong>Overskrift 3</strong>
    <p>INDHOLD 3</p>
</div>

</BODY>
</HTML>
Avatar billede roenving Novice
31. januar 2005 - 15:40 #14
uff ...

    if(elms[i].id.indexOf('knapdiv')==0)
      elms[i].style.display = "none";
Avatar billede msoee Nybegynder
31. januar 2005 - 16:07 #15
er det ikke magen til det i overstående? :)
Avatar billede roenving Novice
01. februar 2005 - 11:51 #16
Der var en tavetosse, da m og s var byttet om ...
Avatar billede msoee Nybegynder
01. februar 2005 - 15:14 #17
Ahh det ka smutte det pis :)

Men altså som det ser ud nu - den melder ikke længere fejl til scriptet - men ellers er alt der sker at den starter med at vise alle div's indhold i en lang køre - og når man så trykker på en af knapperne forsvinder alt indhold...

Meningen er at den til start ikke må vise noget men når man så trykker på knapperne skal den da komme med indholdet - og trykker du enten på en ny knap - eller samme knap igen, skal den skjule indholdet eller vise den nye knaps indhold samme sted som den viste den oprindeliges indhold..

Håber jeg er til at forstå - stod ikke først i køen da gud uddelte formuleringsevner. ;)
Avatar billede roenving Novice
02. februar 2005 - 02:43 #18
Tjah, så har du ikke prøvet at klampe det helt sammen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Test Show/Hide </TITLE>
<script type="text/javascript">
function GetElement(id){return document.getElementById(id);}

function toggleView(recordID) {
  elms = document.getElementsByTagName('DIV');
  for(i=0;i<elms.length;i++)
    if(elms[i].id.indexOf('knapdiv')==0)
      elms[i].style.display = "none";
  objRecord = GetElement(recordID);
  objRecord.style.display = (objRecord.style.display=="block" ? "none" : "block");
}
</script>
<style type="text/css">
.skjul{
  display:none;
}
</style>
</HEAD>

<BODY>

<a href="#" onclick="toggleView('knapdiv1');">Knap 1</a>
<a href="#" onclick="toggleView('knapdiv2');">Knap 2</a>
<a href="#" onclick="toggleView('knapdiv3');">Knap 3</a>

<div id="knapdiv1" class="skjul">
    <strong>Overskrift 1</strong>
    <p>INDHOLD 1</p>
</div>

<div id="knapdiv2" class="skjul">
    <strong>Overskrift 2</strong>
    <p>INDHOLD 2</p>
</div>

<div id="knapdiv3" class="skjul">
    <strong>Overskrift 3</strong>
    <p>INDHOLD 3</p>
</div>

</BODY>
</HTML>
Avatar billede msoee Nybegynder
02. februar 2005 - 11:35 #19
1000 TAK :) Præcis som det var ønsket...

Smider du ik lige et svar?
Avatar billede roenving Novice
02. februar 2005 - 11:51 #20
Velbekomme '-)
Avatar billede roenving Novice
02. februar 2005 - 12:02 #21
-- og tak for point ;~}
Avatar billede msoee Nybegynder
02. februar 2005 - 12:12 #22
hehe så lidt dog :)
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
IT-JOB

Riskpoint A/S (Riskpoint Solutions Limited)

IT Business Analyst

Jyske Bank

Cloud Sikkerhedsarkitekt

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Analytiker til Security Operationscenter i Cyberdivisionen Hvidovre

Qpurpose ApS

Algorithmic Software Engineer (C++)

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Cyberdivisionen søger Business Relationship Manager
Seneste spørgsmål Seneste aktivitet
I går 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »