Hvordan lage en Sammenleggbar DIV i CSS
Bruk sammen DIV-koder for å gjøre det mulig besøkende til nettstedet ditt for å lese mer innhold uten å bli tvunget til å forlate den gjeldende siden. Disse kodene kan du opprette en side med mange utvid overskrifter som lar brukerne se bare detaljene de er interessert i uten å vade om lange sider med tekst. Raskere søk gjøre nettstedet mer brukervennlig og øke sin verdi for de besøkende som et referanseverktøy.
Bruksanvisning
1 Lag en "<div>" tag som inneholder pop-up tekst. Plasser dette i "<body>" i HTML-koden. Sett sin første visning tilstand stykke:
<Div id = "mydiv" style = "display: none"> <h3> Popup tekst <br> Hvordan ser dette </ h3> </ div>
2 Tildele et anker hyperkobling for å åpne en Javascript for å utføre selve pop-up action på "<h3>" tag. I dette skriptet, klikke på venstre museknapp aktiverer link. Plasser denne koden rett under forrige linje:
<A href = "javascript :;" onmousedown = "toggleDiv ( 'mydiv');"> Klikk for å utvide </a>
3 Lag Javascript-funksjonen som styrer synligheten av skjult CSS "<div>" tekst. Plasser denne funksjonen i "<head>" i HTML-koden:
<Script language = "javascript">
funksjon toggleDiv (divid) {
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</ Script>
Hint
- I dette eksempelet teksten "Klikk for å vise eller skjule" vises med de egenskaper som er tildelt "<h3>" tag. Første gang brukeren klikker på teksten, vises meldingen "Popup tekst", "Hvordan ser dette?" Vises på skjermen med et linjeskift i stedet for komma. Meldingen forsvinner når brukeren klikker koden en gang til.