Paulo1471 Posted July 12, 2012 at 08:45 PM Report Share #468515 Posted 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 ! ! Link to comment Share on other sites More sharing options...
pikax Posted July 13, 2012 at 09:14 AM Report Share #468540 Posted 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 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 More sharing options...
Paulo1471 Posted July 13, 2012 at 11:35 AM Author Report Share #468566 Posted July 13, 2012 at 11:35 AM (edited) 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 Link to comment Share on other sites More sharing options...
pikax Posted July 13, 2012 at 11:39 AM Report Share #468567 Posted 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 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 More sharing options...
Paulo1471 Posted July 13, 2012 at 11:46 AM Author Report Share #468569 Posted 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 !! Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 12:03 PM Author Report Share #468575 Posted 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 . Link to comment Share on other sites More sharing options...
KiNgPiTo Posted July 13, 2012 at 12:07 PM Report Share #468576 Posted July 13, 2012 at 12:07 PM (edited) 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 Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 13, 2012 at 12:51 PM Report Share #468579 Posted 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"); } }); } IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 03:25 PM Author Report Share #468604 Posted July 13, 2012 at 03:25 PM (edited) 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 Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 13, 2012 at 03:56 PM Report Share #468611 Posted 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; }); }); IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 04:26 PM Author Report Share #468613 Posted 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 ! Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 13, 2012 at 04:58 PM Report Share #468614 Posted 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; }); }); IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 05:32 PM Author Report Share #468617 Posted 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ê . Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 13, 2012 at 05:49 PM Report Share #468619 Posted 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 ?? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 06:04 PM Author Report Share #468621 Posted 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 ! Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted July 13, 2012 at 06:15 PM Report Share #468622 Posted July 13, 2012 at 06:15 PM o código que coloquei está correto acabei de testar, com o teu código !!!! IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 13, 2012 at 06:24 PM Author Report Share #468626 Posted July 13, 2012 at 06:24 PM Já testei e deu !! Devo ter feito algo mal !! Obrigado !! Vou desactivar o link !! Link to comment Share on other sites More sharing options...
KiNgPiTo Posted July 13, 2012 at 06:25 PM Report Share #468627 Posted 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> Link to comment Share on other sites More sharing options...
Paulo1471 Posted July 15, 2012 at 01:47 PM Author Report Share #468706 Posted July 15, 2012 at 01:47 PM (edited) Obrigado pelas respostas !! PROBLEMA RESOLVIDO !! Edited July 16, 2012 at 03:19 PM by Paulo1471 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now