HTML-koden för Expanderbar lista

February 18

Webbplatser med begränsad display utrymme kan fortfarande visa obegränsade mängder data. Expanderbara HTML-listor, till exempel låta webbdesigners att placera så många klickbara objekt som de vill på en sida. Dessa listor, när kollapsade, bara konsumera en rad på en sida, men kan expandera till valfri längd när den öppnas. Ett snabbt sätt att skapa en expanderbar lista är att använda en HTML div-elementet som listan container.

div Behållare

HTML div-taggar göra perfekta expanderbara behållare eftersom de är skalbart och justera för att hålla deras innehåll. Genom att ändra en enkel Cascading Style Sheet attributvärde, kan du göra en div verkar expandera eller kontrakt beroende på dess nuvarande tillstånd. Färgstarka, iögonfallande listan mönster är också inga problem eftersom CSS kan du ändra en div färger, teckensnitt och lägga till en rad gräns stilar.

Hyperlänkar och listor

När användarna ser objekt i en lista, vanligtvis förväntar de dem att göra något när du klickar. HTML ankare taggar, även kallade länkar, kan visas var som helst på en webbsida. Genom att placera dem i en div behållare, kan du använda ankartaggar som klickbara objekt. Vissa utvecklare lägga till webbadresser till sina länkar, medan andra gör länkarna kallar JavaScript-funktioner när du klickar. Du kan till exempel göra en lista post anropa en funktion som spelar upp ett ljud när du klickar.

CSS kod

När en användare besöker din webbsida, bör sidan visa en lista i sitt kollapsade tillstånd. Ställa in div initiala display attribut till "none" skapar detta tillstånd. När du har skapat en CSS-klass för div justerar klassens bakgrundsfärg, färg, gräns stil och gräns färg attribut som behövs för att skapa den önskade visuella effekten för din lista. Lägga till en text-decoration attribut för klassen och sätta dess värde till "none" bort understrykningar från länkar och gör dem ser ut som vanliga listobjekt.

HTML body-taggen

Skapa listan genom att lägga till en div i dokumentet kropp sektion och bädda ankartaggar inne i div. Varje ankare text beskriver objektet. Till exempel, om listan består av fotografiska produkter för försäljning, kan du lägga till ankare vars text värden är "Kameror", "objektiv" och "Film". Om du vill använda för dessa länkar för att öppna nya webbsidor, ställa in varje länkens href attribut till rätt webbsida i samband med objektet. Ställa in div klass attribut till namnet på CSS-klass som beskrivs i föregående avsnitt gör div verkar kollapsade när sidan först öppnas. Kroppen sektionen behöver också en knapp eller länk som anropar JavaScript-funktion som utökar div.

JavaScript-kod

JavaScript-funktionen du skapar gör listan expandera och kollapsa. När någon klickar på knappen eller länken, använder denna funktion document.getElementById funktionen för att få en referens till div som innehåller listan. Funktionen granskar sedan div nuvarande CSS visningsvärde. Om värdet är "none" koden anger värdet till "block". Om värdet är "block" funktionen ställer den till "ingen". Denna växlingseffekt gör att listan för att kollapsa och expandera som användarna klickar på knappen eller länken.


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2022 Astrixsoft.com | Contact us: webmaster# astrixsoft.com