CSS/HTML, Java Script

Visualizar ou ocultar Div – Java Script / CSS – Atributo Display

O script abaixo permite alterarmos o atributo display das divs, possibilitando ao usuário visualizar ou ocultar o conteúdo das mesmas.

Abaixo o arquivo Java Script:

function altera_display(id) {
	// Opções para o atributo display - block, inline e none
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "block";
	}
	else {
		document.getElementById(id).style.display = "none";
	}
}

Abaixo, o arquivo HTML:

<html>
	<head>
		<title> Alteracao atributo Display </title>
			<script type="text/javascript" src="altera_display.js"></script>
	</head>
	<body>
		<h2> Selecione as opções abaixo: </h2>
		<p>
			<!-- Altera o valor do atributo Display no evento onclick atraves do id da Div-->
			<a href="#" onclick="javascript: altera_display('div01');"> Div 01 </a> |
			<a href="#" onclick="javascript: altera_display('div02');"> Div 02 </a> |
			<a href="#" onclick="javascript: altera_display('div03');"> Div 03 </a> |
			<a href="#" onclick="javascript: altera_display('div04');"> Div 04 </a> |
		</p>
		<!-- Opções para o atributo display - block, inline e none -->
		<div id='div01'	display: block;>
			Conteudo Div 01
		</div>
		<div id='div02' display: block;>
			Conteudo Div 02
		</div>
		<div id='div03'	display: block;>
			Conteudo Div 03
		</div>
		<div id='div04'	display: block;>
			Conteudo Div 04
		</div>
	</body>
</html>

Ao selecionar os links, as Divs serão visualizadas ou ocultadas.
Alterando o atributo Display no documento .html, é possivel modificar a forma como as divs serão apresentadas inicialmente.

Link para download dos arquivos relacionados.

Boa sorte = )

Anúncios

2 comentários sobre “Visualizar ou ocultar Div – Java Script / CSS – Atributo Display

  1. Olá, gostei muito da dica! era justamente o que eu estava precisando! =)
    porém, se eu quiser que as outras divs sejam escondidas quando clicar em uma específica?
    por exemplo: se a div01 estiver em “block”, quando eu clicar na div02, ela aparecerá e a div01 sumirá.
    obrigado!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s