Gewusst wie: anklickbare Registerkarten verfügen, die die ganze Webseite neu laden nicht

Einer der größten Vorteile der Client-seitigen Programmiersprachen wie JavaScript ist, dass sie verwendet werden können, ohne einen Aufruf der Web-Server und eine Aktualisierung der Seite, ein Prozess, der in der Regel die Erfahrung des Benutzers unterbricht Webseite Benutzeroberflächen zu ändern. Dank JavaScript und das DOM fast jede Webseite Element eindeutig identifiziert werden kann verändert und wenn in Webanwendungen verwendet, die keine Seitenaktualisierung erzwingen soll unter Beibehaltung der User Experience Elemente ändern.

Anweisungen

1 Öffnen Sie einen Texteditor, und erstellen Sie eine neue Datei namens "clientTabs.html". Im Allgemeinen ist der Prozess zum Erstellen neuer Dateien in Text-Editoren "neu" aus dem Menü "Datei" auswählen. Fügen Sie einige grundlegende HTML-Tags in die Datei wie folgt:

< html >< Leiter >< / Kopf >< Körper >< / body >< / html >

2 Fügen Sie zwei "< Div >" HTML-Tags, die ClientTabs.html "< Body >" Abschnitt dieses Tabs darstellen. Die folgenden Attribute "Style" dem ersten "< Div >" Tag zu geben: "Border: 1px solid; Höhe: 30px; Breite: 100px; Float: Left; Hintergrund: rot; ". Geben dem zweiten Tag "< Div >" folgende "Stil" Attribute: "Border: 1px solid; Höhe: 30px; Breite: 100px; Float: Left; Hintergrund: blau;" Nahe jeder "< Div >" Element mit einem "< / Div >" Tag. Diese "Stil"-Attributwerte sind Beispiele und können je nach den Anforderungen der Nutzer-Schnittstelle geändert werden.

< Div Style = "Border: 1px solid; Höhe: 30px; Width: 100px; Float: Left; Background: Red;" >< / Div >< Div Style = "Border: 1px solid; Höhe: 30px; Width: 100px; Float: Left; Background: blau;" >< / Div >

3 Fügen Sie zwei weitere "< Div >" HTML-Tags in die Datei. Diese "< Div >" Tags repräsentieren die Webseiten, die zu laden oder entladen, klickt der Benutzer auf die Registerkarten. Das erste "< Div >" Tag hätte eine "Id" Wert "page1" und "Stil" Wert "klar: beide". Weisen Sie dem ersten "< Div >" Tag den Text "Seite 1 Inhalt", und schließen Sie die "< / Div >" Tag. Das zweite Tag "< Div >" hätte ein "Id" Wert "Seite2" und "Stil" Wert "Sichtbarkeit: versteckte". Weisen Sie dem zweiten Tag "< Div >" den Text "Seite 2 Inhalt", und schließen Sie die zweite "< / Div >" Tag.

< Div Id = "page1" Style = "klar: beide" > Seite 1 Inhalt < / Div >< Div Id = "Seite 2" Style = "Sichtbarkeit: versteckte" > Seite 2 Inhalt < / Div >

4 ClientTabs.html eine JavaScript-Funktion hinzufügen, indem man öffnen und Schließen von JavaScript Trennzeichen in der Datei ("< Skript-Typ =" Text/Javascript">" und "< / script >") zwischen der "< Head >" und "< / head >" Markierungen. Benennen Sie die Funktion "OpenPage" und verwenden zwei geschweifte Klammern ("{" und "}") an die Funktion Code Platzierung. Die "OpenPage"-Funktion nimmt zwei Argumente: das Tag "< Div >" Show ("PageToShow") und dem "< Div >" Tag zu verstecken ("PageToHide"). Platzieren Sie die Funktion Argumente in Klammern.

< Skript-Typ = "Text/Javascript" >Funktion OpenPage (PageToShow, PageToHide){}< / script >

5 Bearbeiten Sie die Funktion "OpenPage". Verwenden Sie die JavaScript-Methode "GetElementById" und die "Sichtbarkeit" Style-Attribut, um den Inhalt anzuzeigen, der angezeigt werden soll, klickt der Benutzer auf einen Tab (PageToShow). Außerdem verwenden Sie eine Methode "GetElementById" und die "Sichtbarkeit" Style-Attribut, um den Inhalt zu verbergen, der ausgeblendet werden soll, klickt der Benutzer auf einen Tab (PageToHide).

document.getElementById (PageToShow).style.visibility = "sichtbar";document.getElementById (PageToHide).style.visibility = "hidden";

6 Bearbeiten Sie das erste "< Div >" HTML-Tag in clientTabs.html. Das erste "< Div >"-Tag, das Ruft die Funktion "OpenPage", zeigt Seite eins und Häute Seite zwei fügen Sie ein "onClick()" Ereignis hinzu. Bearbeiten Sie das zweite "< Div >" HTML-Tag in clientTabs.html und das zweite "< Div >"-Tag, das Ruft die Funktion "OpenPage", Seite 1 und Seite zeigt zwei verbirgt fügen Sie ein Ereignis "onClick() hinzu". Nach Schritt sechs, wie unten dargestellt ist, die clientTabs.html sollte angezeigt werden:

< html >< Head >< Skript-Typ = "Text/Javascript" >Funktion OpenPage (PageToShow, PageToHide){document.getElementById (PageToShow).style.visibility = "sichtbar";document.getElementById (PageToHide).style.visibility = "hidden";}< / script >< / head >< Körper >< Div Style = "Border: 1px solid; Höhe: 30px; Width: 100px; Float: Left; Background: Red;" onclick=openPage('page1','page2') >< / Div >< Div Style = "Border: 1px solid; Höhe: 30px; Width: 100px; Float: Left; blau: Hintergrund;" onclick=openPage('page2','page1') >< / Div >< Div Id = "page1" Style = "klar: beide" > Seite 1 Inhalt < / Div >< Div Id = "Seite 2" Style = "Sichtbarkeit: versteckte" > Seite 2 Inhalt < / Div >< / body >< / html >

7 Öffnen Sie clientTabs.html in einem Webbrowser. Klicken Sie auf jede Registerkarte, und überprüfen Sie, ob der entsprechende Web-Seite-Inhalt ändert und keine Seitenaktualisierung erfordert.

Tipps & Warnungen

• Übergabe von einzelnen Ids zu verstecken und zeigt sie in Funktionen funktionieren nur für eine sehr begrenzte Anzahl von Ids. Mehrere Ids sollten Sie die Funktion flexibler Codierung.
• Das JavaScript "Eigenschaft anzeigen" kann zum Ausblenden und Anzeigen von Elementen einer Webseite, verwendet werden, obwohl diese Eigenschaft in der Benutzeroberfläche kein ausgeblendetes Element Platz hält.
• Ausblenden und Anzeigen von Elementen in Web-Seiten können vielleicht verwirrt. Unbedingt richtig Nachricht Benutzer in Fällen, wo sie mit der Benutzeroberfläche verwechselt werden können.