Hvordan Utvid og skjul tekst i HTML

Hvordan Utvid og skjul tekst i HTML


Å ha utvide og skjule tekst på en webside, må du ta med dynamisk HTML (DHTML) til siden din. Dynamisk HTML er en side som bruker HTML og et skriptspråk, typisk Javascript, for å legge til ekstra måter for en bruker å samhandle med en side utover bare å klikke deg inn linker. Heldigvis finnes det mange gratis skript tilgjengelig. Hver script vil ha to deler: en overskrift manus og kroppen kode. Overskriften skriptet går mellom <HEAD> </ HEAD> taggene, og kroppen koden vil gå under <BODY> der du trenger teksten for å utvide og kollaps.

Bruksanvisning

Gratis DHTML scripts

1 Bruk skript på dhtmlgoodies.com for FAQ eller Q & A sider. Skriptet kan du ha et spørsmål med svaret skjult. Sett skript i din header (mellom <HEAD> og </ head> taggene på toppen av rå HTML). Plasser resten av eksempelkoden i <BODY> på siden der du vil spørsmålene være. Erstatt eksempel spørsmål og svar med din egen. Siden inneholder en "Hvordan bruke" -delen hvis du trenger hjelp til å endre manuset til å jobbe på siden din. Når en bruker klikker på spørsmålet, vil svaret vises under spørsmålet.

2 Bruk skript på dynamicdrive.com for å utvide eller noen DIV på websiden gjennom en enkel vippemekanisme. Det fungerer med alle divs, selv de som har CSS definerte høyder. Flere seksjoner kan grupperes sammen for å kollapse som en enhet.

3 Bruk skript på javascript.internet.com å lage avsnitt sammenleggbare. Skriptet og eksempelkode er gitt i en gul boks. Klikk på "Marker alle" -knappen og deretter kopiere og lime den inn i en egen fil. Instruksjonene for bruk av skript inngår som kommentarer i manuset selv.

4 Hvis du er komfortabel med Javascript og som ren kode, bruker Prototype $ 0 Funksjon (finnes i www.dustindiaz.com), en lignet ned utvide og kollaps script for DIV-koder. Det gir en måte å skjule alle DIV-koder når nettsiden først lastes. Dette skriptet bruker minst mulig kode, men krever mer forståelse av hvordan det fungerer Javascript. Nettstedet gir en kobling til et eksempel av skriptet i aksjon.

Hint

  • Overskriften er hvor all din webside meta data går, som siden tittelen, lenker til Cascading Style Sheets, lenker til RSS-feed og linker til de skriptene du bruker. Overskriften er alltid øverst på siden mellom <head> og </ head> taggene.
  • DIV-koder er divisjoner. De er som deler i en bok. Alt plassert mellom en <DIV> og </ div> tag kan styres som et enkelt element, enten det er et enkelt ord eller flere avsnitt.