none
Exibir e Ocultar Divs e Alterar CSS dos botões RRS feed

  • 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

    domingo, 6 de maio de 2012 23:37

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
    terça-feira, 8 de maio de 2012 13:13

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

    segunda-feira, 7 de maio de 2012 10:39
  • 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.

    segunda-feira, 7 de maio de 2012 17:14
  • 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

    segunda-feira, 7 de maio de 2012 17:51
  • 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
    terça-feira, 8 de maio de 2012 12:44
  • 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
    terça-feira, 8 de maio de 2012 13:13
  • Beleza pura!!!!

    Funcionou perfeitamente!

    Obrigado pela ajuda.

    terça-feira, 8 de maio de 2012 13:45