Jump to content

Trocar Div Conforme Acção (Swicth Div)


Paulo1471

Recommended Posts

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 ! !

Link to comment
Share on other sites

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

Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender.

A beleza de um código está em decompor problemas complexos em pequenos blocos simples.

"learn how to do it manually first, then use the wizzy tool to save time."

"Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast."

Link to comment
Share on other sites

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 by Paulo1471
Link to comment
Share on other sites

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

Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender.

A beleza de um código está em decompor problemas complexos em pequenos blocos simples.

"learn how to do it manually first, then use the wizzy tool to save time."

"Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast."

Link to comment
Share on other sites

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 .

Link to comment
Share on other sites

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 by KiNgPiTo
Link to comment
Share on other sites

@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");
         }
    });
}
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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 by Paulo1471
Link to comment
Share on other sites

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;
   });
});
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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;
   });
});
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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 ??

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.