Le schede sono diventati così comuni sul Web che browser anche utilizzarle per visualizzare i dati. Una scheda è semplicemente un controllo cliccabile che provoca un blocco di informazioni da visualizzare. Alcuni linguaggi di programmazione quali c# hanno controlli scheda incorporata che creare schede per voi. Se sei uno sviluppatore JavaScript, è possibile creare la propria pagina a schede informazioni utilizzando fogli di stile CSS e una piccola quantità di codice JavaScript.

Istruzioni

1

Avviare un editor HTML e aprire uno dei documenti HTML. Incollare il codice riportato di seguito nella sezione body del documento:

< ul id = "pageTabs" >
< li >< un href = "javascript:manageTabs('masterPage', 'tabPage1')" > Prodotti < /a >< / li >
< li >< un href = "javascript:manageTabs('masterPage', 'tabPage2')" > supporto < /a >< / li >
</UL >
< div id = "masterPage" class = "masterLayout" >
< / div >

Il tag ul crea un elenco non ordinato. Tale elenco contiene due elementi di elenco. Ogni voce dell'elenco passa il valore di id di una delle tue pagine scheda a una funzione JavaScript denominata manageTabs. La parola "Prodotti" viene visualizzato accanto al primo elemento dell'elenco e la parola "Supporto" viene visualizzato accanto al secondo. Questi sono i nomi che appariranno sulle schede quando sono visti in un browser. Modificare questi nomi per qualcosa che ti piace. Il div "masterPage" definisce la tua pagina scheda master. Questa è la pagina dove il contenuto viene visualizzato quando gli utenti fare clic sulle schede.

2

Aggiungere il seguente codice sotto il codice elencato nell'ultimo passaggio:

< div id = "tabPage1" class = "tabLayout" >
TabPage1 all'interno
< / div >

< div id = "tabPage2" class = "tabLayout" >
TabPage2 interno
< / div >

Questi due div definire il contenuto delle tue pagine scheda. Sostituire "tabPage1" e "all'interno di tabPage2" con qualsiasi contenuto che ti piace.

3

Incollare il seguente codice CSS nella sezione head del documento:

< style >
#pageTabs UL {list-style-type: none; text-decoration: none; margin-left: 0px; margin-bottom: 0px;}
UL #pageTabs li {display: inline; text-decoration: none; padding: 2px;}

Questo codice imposta il contenitore principale che contiene le pagine scheda. Il valore di "inline" per l'attributo display provoca le schede da visualizzare orizzontalmente attraverso la pagina. Regolare il valore di riempimento se volete. Questo valore è espresso in pixel e definisce la distanza tra ogni scheda.

4

Aggiungere il codice riportato di seguito dopo il codice elencato nel passaggio precedente:

UL #pageTabs li un {background-color: #dddddd; text-decoration: none; border-bottom: none;}
UL #pageTabs li un: hover {background-color: White;}

La prima riga imposta lo stile di bordo e colore di sfondo delle schede. Il valore esadecimale di "#dddddd" crea un colore di fondo grigio chiaro. Il valore "None" per gli attributi text-decoration rimuove le sottolineature dai collegamenti che costituiscono le schede. Valore della proprietà border-bottom è "nessuno". Questo valore consente le schede di fondersi con la pagina della scheda. L'ultima riga definisce il colore che si desidera una scheda da visualizzare quando un utente sposta un cursore del mouse sopra la scheda. In questo esempio, che il colore è bianco. Cambiare quel colore, se è necessario.

5

Aggiungere le righe CSS finale di codice dopo il codice mostrato nell'ultimo passaggio:

.masterLayout {altezza: 400px; width: 500px; border-width: 1px; border-style: solid;}
.tabLayout {display: none;}
< / stile >

La classe masterLayout imposta le dimensioni della tua pagina scheda master. Tali valori sono 400 e 500 pixel in questa istanza. È possibile modificare tali valori anche. La larghezza del bordo e border-style attributi definiscono bordo della pagina master scheda. La riga finale del codice imposta l'attributo di visualizzazione delle pagine che verranno visualizzate nella pagina scheda master. Poiché questo valore è "nessuno", quelle pagine non apparirà sulla tua pagina Web fino a quando un utente fa clic su una delle schede

6

Aggiungere questa funzione JavaScript alla sezione head di un documento:

Function manageTabs (masterPage, selectedPage) {
var masterObject = document.getElementById(masterPage);
var selectedObject = document.getElementById(selectedPage);
masterObject.innerHTML = selectedObject.innerHTML;
}

Questa funzione recupera un riferimento alla scheda che un utente fa clic. L'ultima istruzione copia il codice HTML dalla pagina scheda selezionata alla pagina master. In questo modo il contenuto di tale scheda venga visualizzato nella pagina Web.

7

Salvare il documento e visualizzarlo in un browser per visualizzare le schede. Fare clic sulle schede per vedere come cambia il contenuto della pagina si fa clic su loro.

Consigli & Avvertenze

• Per aggiungere un'altra scheda, aggiungere un altro elemento di elenco tag ul del documento come mostrato in questo esempio: < li >< un href = "javascript:manageTabs('masterPage', 'tabPage3')" > < /a >< / li > nella pagina nuova scheda. Questo crea una terza scheda che fa riferimento a una pagina nuova scheda cui id è "tabPage3." Creare nuova pagina della scheda aggiungendo un terzo blocco div sotto i blocchi div esistente definito nella sezione del corpo. Impostare il valore di id del div che per "tabPage3." Aggiungi come molte schede e pagine scheda come si come l'utilizzo di questo metodo.