jQuery - Mostra solo un div in qualsiasi momento

Question

Sto lavorando a un nuovo menu, in cui sono presenti div multiple nascoste, ma voglio solo mostrare un div sulla pagina in qualsiasi momento.

Ecco il mio codice; http://jsfiddle.net/sXqnD/

HTML è bello e semplice;

<div id="linkwrapper"> 
<a id="link1" href="#">link1</a><br/> 
<a id="link2" href="#">link2</a><br/> 
<a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div id="link1content">Information about 1.</div> 
    <div id="link2content">Information about 2.</div> 
    <div id="link3content">Information about 3.</div> 
</div> 

Ecco il mio tentativo di jQuery, che non sembra funzionare bene.

$(document).ready(function(){ 

$('#infocontent').children().hide(); 

$('#linkwrapper a').click(function(){ 

    var chosen1 = this.id; 

    $('#infocontent').children('div').each(function(i) { 
     var i = i+1; 
     if($("#" + this.id).is(":visible") == true) { 
      $("#" + this.id).hide(function(){ 
       $("#" + chosen1 + "content").show(); 
      }); 
      return false; 

     } else { 
     $("#" + this.id).show(); 
     return false; 
     } 
    }); 
}); 
}); 

Qualcuno può vedere dove ho sbagliato o suggerire una soluzione più elegante?

Answer 1

Grazie per tutti i consigli.

Ho trovato che questa fosse la soluzione migliore per quello che stavo cercando di ottenere.

http://jsfiddle.net/sXqnD/15/

HTML

<div id="linkwrapper"> 
    <a id="link1" href="#">link1</a><br/> 
    <a id="link2" href="#">link2</a><br/> 
    <a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div id="link1content">Information about 1.</div> 
    <div id="link2content">Information about 2.</div> 
    <div id="link3content">Information about 3.</div> 
</div> 

jQuery

$("#infocontent").hide(); 
$("#infocontent div").hide(); 


    $('#linkwrapper a[id]').click(function(){ 

    var vsubmen = this.id +"content"; 

    if($("#infocontent").is(":visible") == false) { 
     $("#" + vsubmen).show('fast',function() { 
      $("#infocontent").slideDown(); 
     }); 
    } else if ($("#" + vsubmen).is(":visible") == false) { 
    $("#infocontent").slideUp('slow',function(){ 
     $("#infocontent div").hide(); 
     $("#" + vsubmen).show(); 
     $("#infocontent").slideDown('slow');  
     }); 
    } else { 
    $("#infocontent").slideUp('slow',function(){ 
     $("#infocontent div").hide(); 
    }); 
    } 
    return false; 
}); 

Answer 2

$('div').filter('#idOfDivToShow').show(); 
$('div').not('#idOfDivToShow').hide(); 

$('div') troverà tutti i div sulla tua pagina web. .filter eseguirà una ricerca all'interno dei risultati corrispondenti a $('div') e corrisponderà agli elementi che hanno id = idOfDivToShow. .not cercherà all'interno dei risultati corrispondenti a $('div') e corrisponderà a elementi che non hanno id = idOfDivToShow.

Infine, se si desidera effettuare la ricerca solo all'interno di un particolare elemento, diciamo #infocontent, allora si potrebbe scrivere:

$('#infocontent').filter('div').filter('#idOfDivToShow').show(); 
$('#infocontent').filter('div').not('#idOfDivToShow').hide(); 

Answer 3

$(window).ready(function(){ 
    /* hide the content divs */ 
    $('#infocontent div').css('display', 'none'); 

    /* add click events */ 
    $('#linkwrapper a').click(function(){ 
     $('#infocontent div').css('display', 'none'); 
     $('#'+this.id+'content').css('display', 'block'); 
    }); 
}); 

Vorrei anche prendere un momento per cambiare il vostro link href attributi " javascript: void (null);" per evitare il salto della pagina se i collegamenti sono sotto la "piega" della pagina.

Answer 4

Che ne dici di questo? http://jsfiddle.net/sXqnD/2/

<div id="linkwrapper"> 
    <a id="link1" href="#">link1</a><br/> 
    <a id="link2" href="#">link2</a><br/> 
    <a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div class="content" id="link1content">Information about 1.</div> 
    <div class="content" id="link2content">Information about 2.</div> 
    <div class="content" id="link3content">Information about 3.</div> 
</div> 

JS:

$(document).ready(function(){ 

    $('#infocontent').children().hide(); 

    $('#linkwrapper a').click(function(){ 
     var chosen1 = this.id; 
     $('.content').hide(); 
     $('#' + chosen1 + 'content').show(); 
    }); 
}); 

penso troverete manipolare roba da ID similmente-formattati non sarà molto bello lavorare con nel lungo periodo però.

Answer 5

Vorrei suggerire semplificandolo nella funzione click per nascondere semplicemente tutto e poi mostrare quello che si vuole

$('#linkwrapper a').click(function(){ 
    $('#infocontent').children('div').each(function(i) { this.hide(); }); 
    $('#' + this.id + 'content').show(); 
}); 

Answer 6

Per il cambio più veloce:

Da

$(document).ready(function(){ 

$('#infocontent').children().hide(); 

$('#linkwrapper a').click(function(){ 

var chosen1 = this.id; 

$('#infocontent').children('div').each(function(i) { 
    var i = i+1; 
    if($("#" + this.id).is(":visible") == true) { 
     $("#" + this.id).hide(function(){ 
      $("#" + chosen1 + "content").show(); 
     }); 
     return false; 

    } else { 
    $("#" + this.id).show(); 
    return false; 
    } 
    }); 
}); 
}); 

Per

$(document).ready(function() { 

    $('#infocontent').children().hide(); 

    $('#linkwrapper a').click(function() { 

     var chosen1 = this.id; 
     $('#infocontent').children().hide(); 
     $("#" + chosen1 + "content").show(); 

    }); 
}); 

ho praticamente sostituito la funzione .Ogni() con 1) che nasconde tutti i bambini, e quindi 2) che mostra la div desiderato

Answer 7

La mia soluzione è qui: http://jsfiddle.net/sXqnD/8/

Codice:

$(document).ready(function(){ 

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs 

    $('#linkwrapper a').click(function(){ 
     var $contentDiv = $("#" + this.id + "content"); 

     if($contentDiv.is(":visible")) { 
      $contentDiv.hide(); // Hide Div 
     } else {    
      $allContentDivs.hide(); // Hide All Divs 
      $contentDiv.show(); // Show Div 
     } 

     return false;   
    }); 
}); 

Answer 8

Questa è una risposta che è vicina a ciò che hai avuto. Si basa su questo pensiero: - trova i div e mostrare solo il div specificato se è nascosto - nascondere di tutti gli altri div

$(document).ready(function() { 

      $('#infocontent').children().hide(); 

      $('#linkwrapper a').click(function() { 

       var chosen1 = this.id; 
       var divIdToShow = chosen1 + 'content'; 

       $('#infocontent').children('div').each(function (i) { 
        var currentDiv = $(this); 
        if (this.id == divIdToShow) { 
         if (currentDiv.not(':visible')) { 
          currentDiv.show(); 
         } 
        } else { 
         currentDiv.hide(); 
        } 
       }); 
      }); 
     });