JQuery Scambio la levetta di elementi, uno alla volta

Question

Sono nuovo di JQuery e mi piacerebbe sapere se hai qualche idea per quanto riguarda come eseguire le seguenti operazioni con JQuery invece di JScript:

Si dispone di un gruppo di una di all'interno di un div top:

<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 sotto di loro, all'interno dello stesso contenitore div, ci sono quattro div contenuto, uno dopo l'altro, ciascuno appartenente a ciascuno dei sopra una di:

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

Ora, l'idea è che iniziamo chiudendo tutti questi contenuti div ma uno, il primo: Acerca, che è visibile all'utente:

$(document).ready(function(){

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

});

Ora, utilizzando il H3 una del in alto, voglio il seguente comportamento di prendere posto:

1.- Se scatto una voce diversa da quella aperta per impostazione predefinita (acerca), quindi chiudere quella attualmente aperta e mi mostra quello nuovo. 2.- Se scatto lo stesso articolo che è già aperto (acerca), poi non succede nulla: ci deve sempre essere un contenuto div aperto a tutti i tempi. 3.- Se possibile, utilizzando #anchors per mascherare il "javascript :;" brutto dei vecchi tempi.

Questo è molto semplice con l'utilizzo della funzione onclick di Javascript (tranne che per 3 #), ma, io sto in qualche modo rimanere bloccati con jQuery.

Aiuto è molto apprezzato Sotkra

Answer 1

Mi piacerebbe assegnare una classe comune a tutti i div in modo che io potessi fare riferimento collettivamente. Quando si seleziona uno degli ancoraggi, mi piacerebbe cancellare qualunque classi "selezionati" da tutti i div, quindi applicare una classe "selezionato" per la DIV che dovrebbe essere mostrato. Vorrei quindi nascondere tutti i div che non hanno la classe selezionata e mostrano il DIV che ha la classe selezionata. In questo modo se si ricliccare lo stesso link non avrà alcun lampeggiare come si farebbe se semplicemente nascosti tutti i div quindi visualizzare quello selezionato.

  $('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

La soluzione più semplice è quella di aggiungere manualmente gli eventi per ogni elemento del menu e poi nascosto o mostrando con "toggle" sulla quale è possibile aggiungere gli stessi effetti come con esposizione avrai scegliendo

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

Un'altra soluzione, in questo caso è possibile aggiungere le voci di menu senza modificare il codice jQuery, con il requisito che il testo di ancoraggio deve essere il div id.

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

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

Answer 3

A leggermente diversa variante del di tvanfosson idea .

$('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

Dopo aver tracciato un po 'di ispirazione da vostri suggerimenti, mi si avvicinò con questo:

$('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;


            }
   });

In questo caso:

1.-Come si automatizzare il 'targetting' degli altri div in modo da non li nome singolarmente? array?

Grazie comunque, continuerò a lavorare su di esso.

Answer 5

Ora andato per quanto l'aggiunta di un ulteriore funzionalità / touch per il 'menu ancore' stessa. Il tutto, JQuery saggio, si presenta così. Nevermind i nomi delle variabili sciocchi usati per l'esempio =):

$(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

grandi risposte ragazzi!

Ho fatto alcune modifiche per ottenere qualche animazione mentre la commutazione le div ... ho usato l'effetto scivolo ma dovrebbe funzionare con qualsiasi tipo di animazione.

$('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: Questo codice funziona solo se si dispone di un div precedentemente selezionato e visibile, perché io sto usando il funzione di callback all'interno hide() per attivare l'effetto show() e farlo bello e liscio ...