Hvordan legge til faner i Internet Explorer 7 med Javascript

Hvordan legge til faner i Internet Explorer 7 med Javascript


Ifølge Tony Schreiner, en utvikler på Internet Explorer-team, filosofien bak faner er å holde brukerne kontroll over sine erfaringer. Selv om du ikke kan legge til faner i Internet Explorer 7 brukergrensesnitt med Javascript, kan du legge faner til websider i Internet Explorer 7.

Bruksanvisning

Aktiver Javascript i Internet Explorer 7

1 Åpne Internet Explorer 7 og klikk på "Verktøy" -menyen.

2 Velg "Alternativer for Internett."

3 Klikk på "Sikkerhet".

4 Velg "Internet" globusikonet for å åpne Internett soneinnstillingene.

5 Klikk på "Egendefinert nivå" -knappen. Den "Security Settings" dialogboksen.

6 Bla til "Scripting" -delen nær bunnen av listen. Velg "Enable" -knappen for "Active Scripting" alternativet.

7 Klikk på "OK". Klikk "OK" igjen.

Lag Faner i en webside for Internet Explorer 7

8 Opprett en HTML-fil til å produsere kategoriene. Bruk <div> tagger med en class = tabcontent attributt og unik id for referanse til å skape struktur og innhold i hver kategori. Koden ser omtrent slik ut:

<Div class = "tabContent" id = "om">

Erstatte din faktiske unike id for "om."

9 Etablere koblinger i en uordnet liste for å lage titler for hver kategori. Bruk en individuell listeelement for hver kategori tittel. Koden kan se omtrent slik ut:

<Ul id = "tabs">
<Li> <a href="#about"> Om X </a> </ li>
<Li> <a href="#samples"> Prøver av X </a> </ li>
<Li> <a href="#usage"> Bruke X </a> </ li>
</ Ul>

Erstatte de faktiske listeelementer og titler, selvfølgelig.

10 Lag en CSS-fil for å finne ut hva fanene vil se ut. CSS bestemmer skriftstil, skriftstørrelse og farger av kategorien og kategorien innholdsområder (se Ressurser for opplæringen og eksempler).

11 Opprett Javascript for å aktivere kategoriene. Fanene er aktivert ved å feste en showTab () hendelseshåndterer til hver kategori, deretter skjule alle unntatt den første kategorien. På den måten frontklakken viser innholdet mens de andre er skjult bak den. Fire Javascript-funksjoner brukes til å aktivere kategoriene.

init () Stiller tappene opp når siden lastes.

showTab () Viser innholdet i den valgte kategorien og skjuler de andre bak seg.

getFirstChildWithTagName () Hjelper init () -funksjonen hente lenken element inne i hver fane listeelement.

getHash () Hjelper init () -funksjonen trekke fanen innhold id referert i en fane link.

12 Sett HTML, CSS og Javascript elementer de sammen for å begynne å jobbe med faner i Internet Explorer 7.

Hint

  • Bruk en individuell <div> tag, class = tabcontent attributt, og unik id for hver kategori.
  • Bruk CSS til å skille mellom valgte faner og uselekterte faner.