Usuário com melhor resposta
Exibir e Ocultar Divs e Alterar CSS dos botões

Pergunta
-
Olá pessoal,
Tenho em minha aplicação quatro (4) abas e preciso alterar o CSS delas. Cada aba exibe uma div. Abaixo tenho o java script para exibir e ocultar as divs que funciona perfeitamente, mas preciso implementar neste mesmo código a alteração do estilo CSS nos botões.
<script type="text/javascript">
//declaração do Array, com tamanho 5(elementos)
arDivs = new Array(4);
arDivs[0] = "div1";
arDivs[1] = "div2";
arDivs[2] = "div3";
arDivs[3] = "div4";
function ExibirOcultarDivs(id) {
var div;
for (var i = 0; i < 5; i++) {
div = document.getElementById(arDivs[i]);
if (div.id == id) {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
}
</script>Uso: onClick = "ExibirOcultarDivs('div1')"
Alguém sabe como posso implementar este recurso no código acima?
Grato,
Ilano
Respostas
-
Ilano,
Tente isso:
<script type="text/javascript"> //declaração do Array, com tamanho 5(elementos) arDivs = new Array(4); arDivs[0] = "div1"; arDivs[1] = "div2"; arDivs[2] = "div3"; arDivs[3] = "div4"; arButtons = new Array(4); arButtons[0] = "btn1"; arButtons[1] = "btn2"; arButtons[2] = "btn3"; arButtons[3] = "btn4"; function ExibirOcultarDivs(id) { var div; for (var i = 0; i < 5; i++) { div = document.getElementById(arDivs[i]); button = document.getElementById(arButtons[i]); if (div.id == id) { div.style.display = 'block'; button.className = "nomeClasseAspecto1"; } else { div.style.display = 'none'; button.className = "nomeClasseAspecto2"; } } } </script>
Abraço,
Carlos Eduardo Ferreira
- Marcado como Resposta ilanocf terça-feira, 8 de maio de 2012 13:45
Todas as Respostas
-
Ilano,
Tente isso:
<script type="text/javascript"> //declaração do Array, com tamanho 5(elementos) arDivs = new Array(4); arDivs[0] = "div1"; arDivs[1] = "div2"; arDivs[2] = "div3"; arDivs[3] = "div4"; function ExibirOcultarDivs(id) { var div; for (var i = 0; i < 5; i++) { div = document.getElementById(arDivs[i]); if (div.id == id) { div.style.display = 'block'; div.className = "nomeClasseAspecto1"; } else { div.style.display = 'none'; div.className = "nomeClasseAspecto2"; } } } </script>
Abraço,
Carlos Eduardo Ferreira
-
-
-
Olá Carlos Eduardo,
Bem, tenho 4 abas, preciso que quando clicar em um botão além de visualizar a div referente a ele (como consta no código acima) este botão ainda receba outro CSS já construído para alterar sua cor
Quando abro a página os botões estão com os CSS já pré-definidos, colocando em evidência a primeira ABA:
Botão 1 (CSS 2)
Botão 2 (CSS 1)
Botão 3 (CSS 1)
Botão 4 (CSS 1)Quando clicar nos botões, estes CSS devem ser alterados executando o JavaScript acima para visualizar a DIV correspondente:
Botão 1 (CSS 1)
Botão 2 (CSS 2)
Botão 3 (CSS 1)
Botão 4 (CSS 1)Mas gostaria de saber se isso pode ser implementado no código informado no início deste post.
Detalhe: Estes botões são do tipo input button (html).
- Editado ilanocf terça-feira, 8 de maio de 2012 12:47
-
Ilano,
Tente isso:
<script type="text/javascript"> //declaração do Array, com tamanho 5(elementos) arDivs = new Array(4); arDivs[0] = "div1"; arDivs[1] = "div2"; arDivs[2] = "div3"; arDivs[3] = "div4"; arButtons = new Array(4); arButtons[0] = "btn1"; arButtons[1] = "btn2"; arButtons[2] = "btn3"; arButtons[3] = "btn4"; function ExibirOcultarDivs(id) { var div; for (var i = 0; i < 5; i++) { div = document.getElementById(arDivs[i]); button = document.getElementById(arButtons[i]); if (div.id == id) { div.style.display = 'block'; button.className = "nomeClasseAspecto1"; } else { div.style.display = 'none'; button.className = "nomeClasseAspecto2"; } } } </script>
Abraço,
Carlos Eduardo Ferreira
- Marcado como Resposta ilanocf terça-feira, 8 de maio de 2012 13:45
-