Exibir e Ocultar Divs e Alterar CSS dos botões

Question

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

Answer 1

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

Answer 2

Olá Carlos Eduardo,

Desde já agradeço sua atenção. Na verdade, o que preciso é alterar o CSS das Abas (Button) e não propriamente DIVs.

Answer 3

O que você quer exatamente?

Por um efeito no botão quando o mouse passar por ele?

Alterar a cor quando for clicado?

---

Carlos Eduardo Ferreira

Answer 4

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).

Answer 5

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

Answer 6

Beleza pura!!!!

Funcionou perfeitamente!

Obrigado pela ajuda.