JQuery Permuta a alternância de elementos, um de cada vez

Question

Eu sou novo para JQuery e eu gostaria de saber se você tem alguma idéia sobre como realizar o seguinte com JQuery em vez de JScript:

Você tem um grupo de um de dentro de uma div topo:

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

E abaixo deles, dentro da mesma div recipiente, há quatro divs conteúdo, um após o outro, cada um pertencente a cada um dos um do acima:

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

Agora, a idéia aqui é que nós começar por fechar todos estes conteúdos div de apenas um, o primeiro: Acerca, que é visível para o usuário:

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

Agora, usando o h3 um está no topo, eu quero o seguinte comportamento para ocorrer:

1.- Se eu clicar em um item diferente do que o aberto por padrão (Acerca), em seguida, feche o atualmente aberto e me mostrar o novo. 2.- Se eu clicar o mesmo item que já está aberto (Acerca), então nada acontece: deve haver sempre um div de conteúdo aberto em todos os momentos. 3.- Se possível, usando #anchors para mascarar o "javascript :;" feio dos velhos tempos.

Este é muito simples com o uso da função onclick de JavaScript (excepto para # 3), mas, estou de alguma forma ficar preso com JQuery.

Ajuda é muito apreciada Sotkra

Answer 1

Eu atribuir uma classe comum a todos os DIVs para que eu pudesse referenciá-los coletivamente. Quando uma das âncoras é selecionado, eu remover todas as classes "selecionados" de todos os DIVs, em seguida, aplicar uma classe "selecionada" para o DIV que deve ser mostrado. Eu, então, esconder todas as DIVs que não têm a classe selecionada e mostram o DIV que tem a classe selecionada. Dessa forma, se você clique novamente no mesmo link que você não terá qualquer piscando como seria se você simplesmente escondidos todos os DIVs em seguida, exibir o selecionado.

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 }); 

Answer 2

A solução mais fácil é adicionar manualmente os eventos para todos os elementos do menu e, em seguida, oculta ou mostrando com "toggle" na qual você pode adicionar os mesmos efeitos como com show de Hidde

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

Outra solução, neste caso, você pode adicionar itens de menu sem alterar o código jQuery, com o requisito de que o texto âncora deve ser o id div.

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });

Answer 3

Uma variação ligeiramente diferente do o tvanfosson ideia .

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

Answer 4

Depois de desenhar um pouco de inspiração de suas sugestões, eu vim com isso:

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

Neste caso:

1.-Como você automatizar o 'targetting' dos outros divs para que você não nomeá-los individualmente? matrizes?

Obrigado de qualquer forma, vou continuar trabalhando nele.

Answer 5

Agora foi tão longe como a adição de uma funcionalidade extra / toque para o 'menu âncoras' em si. A coisa toda, JQuery sábio, se parece com isso. Nevermind os nomes das variáveis ??tolas utilizada para o exemplo =):

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});

Answer 6

Great responde guys!

Eu fiz alguns ajustes para obter algum animação enquanto alternância os divs ... eu usei o efeito slide, mas ele deve funcionar com qualquer tipo de animação.

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

Nota: Este código só funciona se você tiver um selecionado anteriormente e div visível, porque eu estou usando o função de retorno hide() dentro para ativar o efeito show() e obtê-lo agradável e suave ...