Hvordan lage et fanebasert informasjon Web
Tabs har blitt så vanlig på nettet at selv nettlesere bruke dem til å vise data. En fane er rett og slett en klikkbar kontroll som fører til en blokk med informasjon skal vises. Noen programmeringsspråk som C # har innebygde kategorien kontroller som skaper orden for deg. Hvis du er Java utvikler en, kan du lage din egen faneinformasjonssiden ved hjelp av Cascading Style Sheets og en liten mengde av Javascript-kode.
Bruksanvisning
1 Start en HTML-editor og åpne en av HTML-dokumenter. Lim inn koden vist nedenfor i dokumentets hoveddel:
<ul id = "pageTabs">
<Li> <a href="javascript:manageTabs('masterPage','tabPage1')"> Produkter </a> </ li>
<Li> <a href="javascript:manageTabs('masterPage','tabPage2')"> Support </a> </ li>
</ Ul>
<Div id = "Master" class = "masterLayout">
</ Div>
Den ul tag skaper en sorterte liste. Denne listen inneholder to listeelementer. Hvert element i listen passerer id verdi til en av dine faner til en Javascript-funksjon som heter manageTabs. Ordet "produkter" vises ved siden av den første listeelement og ordet "Support" vises ved siden av andre. Dette er navnene som vises på faner når de vises i en nettleser. Endre disse navnene til noe du liker. Den "Master" div definerer din herre fane. Dette er siden der innholdet vises når brukere klikker på kategoriene.
2 Legg til følgende kode under Kodene i siste trinn:
<Div id = "tabPage1" class = "tabLayout">
inne tabPage1
</ Div>
<Div id = "tabPage2" class = "tabLayout">
inne tabPage2
</ Div>
Disse to divs definere innholdet i faner. Erstatt "inne tabPage1" og "inne tabPage2" med noe innhold du vil.
3 Lim inn følgende CSS-kode i dokumentet hode seksjon:
<Style>
ul # pageTabs {list-style-type: none; text-decoration: none; margin-left: 0px; margin-bottom: 0px;}
ul # pageTabs li {display: inline; text-decoration: none; padding: 2 piksler; }
Denne koden setter opp master beholder som inneholder faner. Verdien av "inline" for visning attributtet forårsaker at fanene skal vises horisontalt over på siden. Juster padding verdi hvis du vil. Denne verdien er i piksler og definerer avstanden mellom hver kategori.
4 Legg inn koden under etter Kodene i forrige trinn:
ul # pageTabs li a {background-color: #dddddd; text-decoration: none; border-bottom: none;}
ul # pageTabs li a: hover {background-color: Hvit;}
Den første linjen angir bakgrunnsfarge og grensen stil av kategoriene. Den heksadesimale verdien av "#dddddd" skaper en lys grå bakgrunnsfarge. Verdien av "ingen" for tekst-dekorasjon attributter fjerner understrekingen fra lenkene som utgjør kategoriene. Grensen-bottom boligens verdi er "ingen". Denne verdien hjelper kategoriene glir i ett med fane. Den siste linjen definerer den fargen du ønsker en kategori for å vise når en bruker flytter en musepekeren over fanen. Denne fargen er hvit i dette eksempelet. Endre den fargen hvis du må.
5 Legg den endelige CSS linjer med kode etter koden vist i det siste trinnet:
.masterLayout {height: 400px; width: 500px; border-width: 1px; border-style: solid;}
.tabLayout {display: none;}
</ Style>
Den masterLayout klassen setter dimensjonene på din herre fane. Disse verdiene er 400 piksler og 500 piksler i dette tilfellet. Du kan endre disse verdiene også. Grense bredde og border-stil attributter definere hoved arkfanen grense. Den siste linjen med kode setter skjermen egenskap av de enkelte sider som skal vises i hoved fane. Siden denne verdien er "ingen", disse sidene vil ikke vises på websiden til en bruker klikker på en av kategoriene
6 Legg til Javascript-funksjonen til dokumentets hodedelen:
funksjons manageTabs (Master, selectedPage) {
Var masterObject = document.getElementById (Master);
Var selectedObject = document.getElementById (selectedPage);
masterObject.innerHTML = selectedObject.innerHTML;
}
Denne funksjonen henter en henvisning til kategorien som en bruker klikker. De siste setningen kopierer HTML fra klikket arkfanen til master side. Dette fører til at kategoriens innhold skal vises på websiden.
7 Lagre dokumentet og vise den i en nettleser for å se kategoriene. Klikk på kategoriene for å se hvordan sidens innhold endres som du klikker på dem.
Hint
- For å legge til en annen kategori, legge til et element i listen til dokumentets ul tag som vist i dette eksempelet: <li> <a href="javascript:manageTabs('masterPage','tabPage3')"> Ny fane </a> < / li>. Dette skaper en tredje kategori som refererer til en ny fane hvis id er "tabPage3." Opprett som ny fane ved å legge til en tredje div blokk under de eksisterende div blokker definert i kroppen delen. Sett at div id verdien til "tabPage3." Legg til så mange faner og faner som du liker å bruke denne metoden.