Jak domyślnie ukryć element div i pokazać go przy kliknięciu za pomocą JavaScript i Bootstrap?

Ukrywanie elementów strony internetowej HTML i pokazanie ich na naciśnięciu na przycisku jest dość proste za pomocą CSS, bootstrap i JavaScript. Istnieje wiele podejść do tego problemu. Jednak żadnego z nich nie można uznać za optymalne lub „najlepsze” rozwiązanie. W tym artykule podejście do ustawiania właściwości wyświetlacza DIV na none na początku i zmiana jej za pomocą JavaScript.

Krok 1: Skonfiguruj dokument HTML

Pierwszym krokiem jest rozpoczęcie od utworzenia dokumentu HTML i wewnątrz tego pliku HTML, po prostu dołącz Div i przycisk z następującymi wierszami:

To jest div
Kliknij, aby pokazać

W powyższych liniach:

• A jest tworzony z konkretnym identyfikatorem, który jest „Hidediv”
• Przycisk jest tworzony z tag, z zestawem właściwości onClick równych ButtonClicked () Funkcja z pliku skryptu

W tym momencie dokument HTML tworzy następującą stronę internetową w przeglądarce:

Div z tekstem i przycisk są wyświetlane na stronie internetowej.

Krok 2: Skonfiguruj plik CSS lub znacznik

Utwórz plik CSS i połącz go z dokumentem HTML lub użyj <styl> Tag. Div nie jest jeszcze wystarczająco widoczny. Dlatego dodanie do niego stylizacji byłoby świetne:

#HIDEDIV
kolor tła: Yellowgreen;
Wysokość: 150px;
szerokość: 150px;

W powyższych liniach:

• Div jest odniesiony, używając jego id jako „Hidediv ”
• Wysokość i szerokość jest określona dla Div
• Kolor tła został przekazany Div

W tym momencie dokument HTML wygląda tak:

Jednak, aby ukryć div na początku, dodaj jeszcze jedną wiersz do pliku CSS, który jest:

Nie wyświetla się;

Cała część CSS stałaby się:

#HIDEDIV
Nie wyświetla się;
kolor tła: Yellowgreen;
Wysokość: 150px;
szerokość: 150px;

Teraz HTML wygląda tak:

Div nie jest wyświetlany na stronie internetowej HTML.

Krok 3: Skonfiguruj plik JavaScript lub tag

Teraz, aby dodać funkcjonalność do przycisku, po prostu dodaj następujące wiersze JavaScript do dokumentu HTML za pomocą pliku Tag lub połączony plik JavaScript:

funkcja ButtonClicked ()
$ („#HINEDIV”).pokazywać();

W tych liniach:

• Funkcja przyciskacled () jest tworzona, co zostanie wywołane po kliknięciu przycisku z powodu wynika na kliknięcie() właściwość zdefiniowana wewnątrz etykietka
• Div odwołuje się do jego identyfikatora „Hidediv”
• Metoda show () jest wywoływana na div, która umożliwia jej wyświetlacz nieruchomość

W tym momencie strona internetowa HTML działa jak następujący:

Div jest wyświetlany na przycisku, a problem został w pełni rozwiązany.

Zakończyć

Div można łatwo ukryć na początku strony internetowej za pomocą wyświetlacz właściwość elementu HTML i można go łatwo wyświetlić ponownie po przycisku naciśnij za pomocą JavaScript. W tym artykule pokazano procedurę krok po kroku w celu osiągnięcia zadania. Jednak, jak wspomniano na początku tego artykułu, istnieje wiele podejść do tego problemu i żadnego z nich nie można uznać za najlepsze rozwiązanie.