JavaScript/HTML - Alternar visibilidad (lo que automáticamente hace que un elemento div se oculte cuando se muestra otro)

Question

Esencialmente, lo que intento hacer es crear un sitio web que tenga todo su contenido en la página de inicio pero solo tenga el contenido visible en cualquier momento. La forma en que leo hacer esto es alternar la visibilidad.

El problema que estoy teniendo es que: Supongamos que la página de inicio, la primera vez que visita el sitio web está en blanco (de la manera que quiero que sea). Digamos que haces clic en el enlace "Sobre nosotros". De repente, la sección Acerca de nosotros se vuelve visible (como yo quiero que sea). Ahora el problema que me he encontrado es cuando sé, digamos que haga clic en el enlace "productos", quiero que el contenido de "productos" se vuelva visible y que el contenido "sobre nosotros" vuelva a ser invisible. (Creando esencialmente la ilusión de abrir una nueva página dentro de la misma página)

Aquí está el código que he encontrado hasta ahora. Puedo hacer que ciertos elementos div sean visibles e invisibles (onclick), pero no puedo entender cómo asegurarme de que solo haya un elemento div visible a la vez.

<script type="text/javascript"> 
function toggleVisibility() { 
document.getElementById("about").style.display = ""; 
if(document.getElementById("about").style.visibility == "hidden") { 
    document.getElementById("about").style.visibility = "visible"; 
} 
else { 
document.getElementById("about").style.visibility = "hidden"; 
} 
} 
</script> 

<script type="text/javascript"> 
function toggleVisibility1() { 
document.getElementById("products").style.display = ""; 
if(document.getElementById("products").style.visibility == "hidden") { 
    document.getElementById("products").style.visibility = "visible"; 
} 
else { 
document.getElementById("products").style.visibility = "hidden"; 
} 
} 
</script> 

Los enlaces para hacer el trabajo Javascript se parece a esto:

< href = "#" onclick = "toggleVisibility();"> Sobre

< href = "##" onclick = "toggleVisibility1();"> Productos

Answer 1

uso de CSS display: propiedad

elemento desaparecen

document.getElementById("products").style.display = "none"; 

elemento aparece y se muestra como bloque (por defecto para div)

document.getElementById("products").style.display = "block"; 

he publicado código de ejemplo aquí: jQuery: menus appear/disappear on click - V2

PS

Aquí puede encontrar buenos ejemplos sobre las diferencias entre visualización y visibilidad: http://wiw.org/~frb/css-docs/display/display.html

Answer 2

Esto es exactamente lo que hace jquery más fácil. Tome este ejemplo muy simple de lo que estamos tratando de lograr:

<style type="text/css"> 
    .section { 
     display: none; 
    } 
</style> 
<script type="text/javascript"> 

    function toggleVisibility(newSection) { 
     $(".section").not("#" + newSection).hide(); 
     $("#" + newSection).show(); 
    } 
</script> 

<a href="#" onclick="toggleVisibility('about');">About</a> 

<a href="#" onclick="toggleVisibility('products');"> Products</a> 

<div id="about" class="section">about section</div> 
<div id="products" class="section">products section</div> 

Answer 3

solución simple es la siguiente:

<script type="text/javascript"> 
    function toggleVisibility(divid) { 
    if (divid="about"){ 
     document.getElementById("about").style.visibility = "visible"; 
     document.getElementById("products").style.visibility = "hidden"; 
    } 
    else if (divid="products") 
    { 
     document.getElementById("products").style.visibility = "visible"; 
     document.getElementById("about").style.visibility = "hidden"; 
    } 
    } 
    </script> 


< href="#" onclick="toggleVisibility('about');">About 

< href="##" onclick="toggleVisibility1('products');"> Products 

Answer 4

Sin jQuery, que le gustaría hacer algo como esto:

<style type="text/css"> 
    .content { 
     display: none; 
    } 
    #about { 
     display: block; 
    } 
</style> 

<script type="text/javascript"> 

    function toggleVisibility(selectedTab) { 

     // Get a list of your content divs 
     var content = document.getElementsByClassName('content'); 

     // Loop through, hiding non-selected divs, and showing selected div 
     for(var i=0; i<content.length; i++) { 
       if(content[i].id == selectedTab) { 
        content[i].style.display = 'block'; 
       } else { 
        content[i].style.display = 'none'; 
       } 
     } 

    } 
</script> 

<a href="#" onclick="toggleVisibility('about');">About</a> 
<a href="#" onclick="toggleVisibility('products');"> Products</a> 

<div id="about" class="content">About stuff here</div> 
<div id="products" class="content">Product stuff here</div> 

Ejemplo aquí: http://jsfiddle.net/frDLX/

jQuery hace esto mucho más fácil, pero si usted es Begi Al usar JavaScript, a veces desea ver el código programático para que pueda ver qué está sucediendo.

Answer 5

aquí es otra, simple función

<script type="text/javascript"> 
function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 
</script> 
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a> 
<div id="foo">blablabla</div>