Trocar Div Conforme Acção (Swicth Div)

Paulo1471 · July 12, 2012 at 08:45 PM

Boas.

Queria fazer o seguinte :

trocar a div visível conforme o botão seleccionado de uma certa lista de botões.

Tipo: botão1 - div1;botão2-div2,...

Já vi algo parecido, mas acontecia que quando a página carregava ( ou quando o botão da div seleccionada fosse clicado outra vez ) não ficava nada visível.

Eu quero que fique sempre alguma.

Obrigado ! !

pikax · July 13, 2012 at 09:14 AM

parece que queres usar javascript, tens aqui um exemplo com jquery

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

basta trocares o p por div


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#hide").click(function(){
   $("div").hide();
 });
 $("#show").click(function(){
   $("div").show();
 });
});
</script>
</head>
<body>
<div>If you click on the "Hide" button, I will disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

aqui mais um link interesante http://www.w3schools.com/jquery/jquery_effects.asp

Paulo1471 · July 13, 2012 at 11:35 AM

Obrigado desde já !!

Mas estava à procura de algo mais parecido com: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

Só que em vez de 'esconder'/'mostrar' tudo, fosse individual : Toggle 1 - Escondia/mostrava paragrafo1 ; Toggle 2- Escondia/mostrava paragrafo2

Obrigado.

Edited July 13, 2012 at 11:36 AM by Paulo1471

pikax · July 13, 2012 at 11:39 AM

A solucao mais facil(mas mais trabalhosa) e' meter id's 'as divs ou tambem um get element

Paulo1471 · July 13, 2012 at 11:46 AM

Encontrei isto : http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ !!

Vou tentar aplicar exactamente naquilo em que quero !!

Obrigado, os links ajudaram bastante !!

Paulo1471 · July 13, 2012 at 12:03 PM

Já consegui por da maneira que queria !! Mas agora gostava de outra coisa !! Para tornar a coisa mais dinâmica e não andar a por texto.

Tenho isto:

<nav id="bt-examples">
 <a id="myHeader1" class="current" href="javascript:showonlyone('newboxes1');">Example 1</a>
 <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Example 2</a>
 <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Example 3</a>
 <a href="">Example 4</a>
 <a href="">Example 5</a>
		    <nav>

O link 1 ( mostra a div 1) tem a class current que, por exemplo, faz com que tenha uma certa cor diferente dos outros, para diferenciar e dizer que está selecciondo.

Queria que quando carregasse num dos outros, esse passasse a ser o current.

Secalhar vai meter javascript e class/id e não vai dar pqe esse links têm que ter class e id para funcionar o mostrar/esconder !!

Mas, alguma ideia ?

Obrigado .

KiNgPiTo · July 13, 2012 at 12:07 PM

Tens no jQuery o addClass e removeClass...

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

Edit:

Reparei agora que deves ter usado a função do link que mostraste. Adaptada ficaria:

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
         if ($(this).attr("id") == thechosenone) {
              $(this).show(200);
              $(this).addClass("current");
         }
         else {
              $(this).hide(600);
              $(this).removeClass("current");
         }
    });
}

Edited July 13, 2012 at 12:18 PM by KiNgPiTo

HappyHippyHippo · July 13, 2012 at 12:51 PM

@kingpito : será mais ou menos isso, no entanto tens que ver que a apresentação não exclusiva, logo pode haver situações que levem a aparecer mais do que um div com a classe current

experimenta assim

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
         if ($(this).attr("id") == thechosenone) {
              $(this).show(200);
              // se é para ter um novo "current" qualquer outro que tenha essa
              // classe deve ser retirada
              $(".current").toggleClass("current");
              $(this).addClass("current");
         }
         else {
              $(this).hide(600);
              $(this).removeClass("current");
         }
    });
}

Paulo1471 · July 13, 2012 at 03:25 PM

Alguns progressos !!

Com o código do HappyHippyHippo remove a classe current do link que é suposte remover ! Mas nao poe no novo link ( pqe se pussese o link mudava de cor(por exemplo ) e e nao muda !!

Com o outro codigo nao faz nada !! Estranho !!

Importante !! Esta alteração de classe e efectudado nos links clicados logicamente, nao na div que aparece. Mas mesmo assim o this faz sentido.

Obrigado desde já pelas respostas !

Edited July 13, 2012 at 03:28 PM by Paulo1471

HappyHippyHippo · July 13, 2012 at 03:56 PM

ok, estive a ler melhor o teu post anterior e verifiquei que tanto eu como o Kingpito interpretamos mal o que pretendias.

o método exposto serve para manipular a classe caso esta fosse relevante ao div a ser apresentado e não ao link

experimenta alterar o código para isto

<nav id="bt-examples">
        <a class="divshower current" href="newboxes1">Example 1</a>
        <a class="divshower" href="newboxes2">Example 2</a>
        <a class="divshower" href="newboxes3">Example 3</a>
        <a href="">Example 4</a>
        <a href="">Example 5</a>
<nav>
<div class="divshowable" id="newboxes1"></div>
<div class="divshowable" id="newboxes2"></div>
<div class="divshowable" id="newboxes3"></div>

// executar depois da página carregada
$(document).ready(function () {
   // registar uma função ao evento de clicar num elemento com a class 'divshower'
   $('.divshower').click(function () {
       // variavel local para rápido acesso ao div associado
       var assoc = $('#'+$(this).attr('href'));

       // verificar se o div associado ao link está a ser apresentado
       if (assoc.css('display') != 'none') {
           // esconder o div e retirar a classe 'current' caso tiver
           assoc.hide(600);
           assoc.removeClass('current');
       } else {
           // descomentar a seguinte linha para apresentação exclusiva dos div's (um de cada vez)
//            $('.divshowable').css('display', 'none');

           // retirar a class current se algum a tiver
           $('.current').removeClass('current');

           // apresentar o div e atribuir-lhe a classe current
           assoc.show(200);
           assoc.addClass('current');
       }

       // retornar false para o link não ser seguido
       return false;
   });
});

Paulo1471 · July 13, 2012 at 04:26 PM

Quase !! O switch da div funciona bem, mas a tal classe current não dá !!

Também ja tentei com outras opções, baseando.me neste exemplos e nos exemplos dos link acima , mas nada, só remove !!

É estranho, pois se remove bem do this, que é o link em causa, o addClass também devia dar .

Thanks again !

HappyHippyHippo · July 13, 2012 at 04:58 PM

epa ... espera .. !!! estava novamente a adicionar a classe ao div e não ao link ....

// executar depois da página carregada
$(document).ready(function () {
   // registar uma função ao evento de clicar num elemento com a class 'divshower'
   $('.divshower').click(function () {
       // variavel local para rápido acesso ao div associado
       var assoc = $('#'+$(this).attr('href'));

       // verificar se o div associado ao link está a ser apresentado
       if (assoc.css('display') != 'none') {
           // esconder o div e retirar a classe 'current' caso tiver
           assoc.hide(600);
           $(this).removeClass('current');
       } else {
           // descomentar a seguinte linha para apresentação exclusiva dos div's (um de cada vez)
//            $('.divshowable').css('display', 'none');

           // retirar a class current se algum a tiver
           $('.current').removeClass('current');

           // apresentar o div e atribuir-lhe a classe current
           assoc.show(200);
           $(this).addClass('current');
       }

       // retornar false para o link não ser seguido
       return false;
   });
});

Paulo1471 · July 13, 2012 at 05:32 PM

Nada , igual !!

Tipo: tas (?) a dar o nome de ' divshower current ' ao link seleccionado e no add so poes current !! Mas se da para o remover.

Em ultimo caso, acrescento um titulo ao painel , nao fica tao fixe mas é o que se arranja caso isto nao dê .

HappyHippyHippo · July 13, 2012 at 05:49 PM

Nada , igual !!

não testei o código mas não estou a ver onde possa estar o problema ... não tens um URL para se poder ver isso a mexer ?

Tipo: tas (?) a dar o nome de ' divshower current ' ao link seleccionado e no add so poes current !! Mas se da para o remover.

não é o nome que estou a atribuir, é a classe. a uma tag pode ser atribuída varias classes

Em ultimo caso, acrescento um titulo ao painel , nao fica tao fixe mas é o que se arranja caso isto nao dê .

já estás a desistir ??

Paulo1471 · July 13, 2012 at 06:04 PM

Não estou a desistir, claro que não !!

Saca ai e testa : https://dl.dropbox.com/u/33652950/Nova%20pasta.rar

Nao ligues ao resto !! Ta em desenvolvimento !

HappyHippyHippo · July 13, 2012 at 06:15 PM

o código que coloquei está correto acabei de testar, com o teu código !!!!

Paulo1471 · July 13, 2012 at 06:24 PM

Já testei e deu !! Devo ter feito algo mal !!

Obrigado !!

Vou desactivar o link !!

KiNgPiTo · July 13, 2012 at 06:25 PM

Está a funcionar com o código do HappyHippyHippo...

Uma alternativa é passar para a função, o id do link que está a chamar a função:

function showonlyone(thechosenone, act) {
   $('.newboxes').each(function(index) {
       if ($(this).attr("id") == thechosenone) {
           $(this).show();
           $(".current").toggleClass("current");
           $("#"+act).addClass("current");
                     }
       else {
           $(this).hide();
       }
    });
}

e

<a id="myHeader1" class="current" href="javascript:showonlyone('newboxes1', 'myHeader1');">Normal Buttons</a>
<a id="myHeader2" href="javascript:showonlyone('newboxes2', 'myHeader2');">Icons Buttons</a>
<a id="myHeader3" href="javascript:showonlyone('newboxes3', 'myHeader3');">Example 3</a>
<a id="myHeader4" href="javascript:showonlyone('newboxes4', 'myHeader4');">Example 4</a>
<a id="myHeader5" href="javascript:showonlyone('newboxes5', 'myHeader5');">Example 5</a>

Paulo1471 · July 15, 2012 at 01:47 PM

Obrigado pelas respostas !!

PROBLEMA RESOLVIDO !!

Edited July 16, 2012 at 03:19 PM by Paulo1471

Sign In

Trocar Div Conforme Acção (Swicth Div)

Recommended Posts

Paulo1471

pikax

Paulo1471

pikax

Paulo1471

Paulo1471

KiNgPiTo

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

KiNgPiTo

Paulo1471

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information