Sådan Tilføj Tabs i Internet Explorer 7 Med Javascript

December 12

Sådan Tilføj Tabs i Internet Explorer 7 Med Javascript


Ifølge Tony Schreiner, en udvikler på Internet Explorer holdet, filosofien bag tabbed browsing er at holde brugerne kontrol over deres erfaringer. Selvom du ikke kan føje faner til Internet Explorer 7 brugergrænseflade med JavaScript, kan du tilføje faner til websider i Internet Explorer 7.

Instruktioner

Aktiver JavaScript i Internet Explorer 7

1 Åbn Internet Explorer 7, og klik på menuen "Funktioner".

2 Vælg "Internetindstillinger".

3 Klik på fanen "Sikkerhed".

4 Vælg "Internet" globus ikonet for at åbne internetindstillinger zone.

5 Klik på knappen "Brugerdefineret niveau". Den "Security Settings" vises dialogboksen.

6 Rul til "Scripting" sektionen nær bunden af ​​listen. Vælg "Aktiver" radio -knappen til "Active Scripting" valgmulighed.

7 Klik på "OK". Klik på "OK" igen.

Opret Tabs i en webside til Internet Explorer 7

8 Opret en HTML-fil til at producere fanerne. Brug <div> tags med et class = tabcontent attribut og unikke id for reference til at skabe struktur og indhold hver fane. Koden ser nogenlunde sådan her:

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

Stedfortræder din faktiske unikke id for "om".

9 Etablere links inden for en uordnet liste til at skabe de titler for hver fane. Brug en individuel punkt på listen for hver fane titel. Koden kunne se noget som dette:

<Ul id = "faneblade">
<Li> <a href="#about"> Om X </a> </ li>
<Li> <a href="#samples"> Prøver af X </a> </ li>
<Li> <a href="#usage"> Brug X </a> </ li>
</ Ul>

Stedfortræder din faktiske listeelementer og titler, selvfølgelig.

10 Opret en CSS-fil til at bestemme, hvad fanerne vil se ud. CSS bestemmer skrifttype, skriftstørrelse og farver af fanen og fanen indholdsområder (se Ressourcer til tutorial og eksempler).

11 Opret JavaScript for at aktivere fanerne. Fanerne aktiveres ved at fastgøre en showTab () event handler til hver fane, og derefter skjule alle, men den første fane. På den måde fanen forreste viser dens indhold, mens de andre er skjult bag den. Fire JavaScript-funktioner bruges til at aktivere fanerne.

init () Indstiller fanerne op når siden indlæses.

showTab () Viser indholdet af den valgte fane og skjuler de andre bag det.

getFirstChildWithTagName () Hjælper init () funktionen hente linket element inde hver fane listeelement.

getHash () Hjælper init () funktionen udpakke fanen indhold id henvises til i en fane link.

12 Læg HTML, CSS, og JavaScript elementer sammen til at begynde at arbejde med faner i Internet Explorer 7.

TIPS

  • Brug en individuel <div> tag, class = tabcontent attribut, og unikke id for hver fane.
  • Brug CSS til at skelne mellem udvalgte faner og umarkerede faner.

relaterede artikler