Come nascondere l'elemento Div per impostazione predefinita e mostrarlo clicca usando JavaScript e Bootstrap?

Nascondere gli elementi di una pagina web HTML e mostrarli su un certo pulsante, è abbastanza semplice con l'aiuto di CSS, bootstrap e javascript. Ci sono più approcci a questo problema. Tuttavia, nessuno di essi può essere considerato ottimale o la soluzione "migliore". Questo articolo adotterà l'approccio di impostare la proprietà del display Div a nessuno all'inizio e cambiarla con l'aiuto di JavaScript.

Passo 1: Imposta il documento HTML

Il primo passo è iniziare creando un documento HTML e all'interno di quel file HTML, include semplicemente un div e un pulsante con le seguenti righe:

Questo è il div
Fai clic per mostrare

Nelle righe sopra:

• UN viene creato con un ID specifico che è "Hidediv"
• Viene creato un pulsante con il tag, con una proprietà OnClick set uguale a Buttonclicked () funzione dal file di script

A questo punto, il documento HTML crea la seguente pagina Web sul browser:

Un div con testo e un pulsante viene visualizzato sulla pagina web.

Passaggio 2: imposta il file CSS o il tag

Crea un file CSS e collegalo con il documento HTML o usa un <stile> tag. Il div non è ancora abbastanza prominente. Pertanto, aggiungere un po 'di stile ad esso sarebbe fantastico:

#Hildiv
Background-color: Yellowgreen;
Altezza: 150px;
larghezza: 150px;

Nelle righe sopra:

• Il Div è riferimento usando il suo ID come "hidediv "
• Un'altezza e una larghezza sono specificate per il div
• Un colore di sfondo è stato dato al div

A questo punto, il documento HTML assomiglia a questo:

Tuttavia, per nascondere il Div all'inizio, aggiungi un'altra riga al file CSS che è:

visualizzazione: nessuno;

L'intera parte del CSS diventerebbe:

#Hildiv
visualizzazione: nessuno;
Background-color: Yellowgreen;
Altezza: 150px;
larghezza: 150px;

Ora, l'HTML assomiglia a questo:

Il Div non viene visualizzato sulla pagina web HTML all'inizio.

Passaggio 3: imposta il file javascript o il tag

Ora, per aggiungere funzionalità al pulsante Premere, aggiungi semplicemente le seguenti righe JavaScript al documento HTML utilizzando un Tag o un file JavaScript collegato:

Funzione ButtonClicked ()
$ ("#hidediv").spettacolo();

In queste righe:

• Viene creato un pulsante di funzione () che verrebbe chiamato al clic del pulsante a causa del al clic() proprietà definita all'interno del etichetta
• Il Div è citato dal suo ID che è "Hidediv"
• Il metodo show () è chiamato sul div che consente il suo Schermo proprietà

A questo punto, la pagina web HTML funziona come seguire:

Il Div viene visualizzato sul pulsante Premere e il problema è stato affrontato completamente.

Incartare

Un div può essere facilmente nascosto all'inizio di una pagina web con l'aiuto del Schermo Proprietà dell'elemento HTML e può essere facilmente visualizzato al pulsante Premere con JavaScript. Questo articolo ha visualizzato la procedura passo-passo per ottenere l'attività a portata di mano. Tuttavia, come menzionato all'inizio di questo articolo, ci sono più approcci a questo problema e nessuno di essi può essere considerato la soluzione migliore.