Javascript/HTML - Sichtbarkeit umschalten (bewirkt automatisch, dass ein div-Element versteckt wird, wenn ein anderes sichtbar gemacht wird)

Question

Im Wesentlichen versuche ich eine Website zu erstellen, die ihren ganzen Inhalt auf der Homepage hat, aber nur einige davon hat der Inhalt zu jeder Zeit sichtbar. Die Art, wie ich das lese, besteht darin, die Sichtbarkeit zu ändern.

Das Problem, das ich habe ist, dass: Nehmen Sie die Homepage, wenn Sie zum ersten Mal auf der Website ist leer (so wie ich es will). Sagen wir, Sie klicken auf den Link "Über uns". Plötzlich wird der Über uns Abschnitt sichtbar (so wie ich es möchte). Das Problem, auf das ich gestoßen bin, ist, wenn ich weiß, dass wir auf den Link "Produkte" klicken können, dass der Inhalt "Produkte" sichtbar wird und der Inhalt "Über uns" wieder unsichtbar wird. (Im Wesentlichen die Illusion zu schaffen, eine neue Seite innerhalb derselben Seite zu öffnen)

Hier ist der Code, den ich bisher gefunden habe. Ich kann bestimmte div-Elemente sichtbar und unsichtbar machen (onclick), aber ich kann nicht herausfinden, wie man sicherstellt, dass immer nur ein div-Element zu sehen ist.

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

Die Links die Javascript-Arbeit sieht wie folgt zu machen:

< href = "#" Onclick = "toggleVisibility();"> Über

< href = "##" Onclick = "toggleVisibility1();"> Produkte

Answer 1

Verwendung CSS display: Eigenschaft

Element verschwinden

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

Element erscheinen und wird als Block (Standard für div) angezeigt

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

I Beispielcode hier gepostet: jQuery: menus appear/disappear on click - V2

PS

Hier können Sie schöne Beispiele über die Unterschiede finden zwischen Anzeige und Sichtbarkeit: http://wiw.org/~frb/css-docs/display/display.html

Answer 2

Das ist genau das, was jQuery einfacher macht. Nehmen Sie diese sehr einfaches Beispiel, was Sie versuchen zu erreichen:

<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

Einfache Lösung ist wie folgt:

<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

Ohne jQuery, würden Sie wollen, um so etwas zu tun:

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

Beispiel hier: http://jsfiddle.net/frDLX/

jQuery macht dies viel einfacher, aber wenn Sie sind begi Wenn Sie mit JavaScript arbeiten, möchten Sie manchmal den Programmcode sehen, damit Sie sehen können, was vor sich geht.

Answer 5

hier ist eine andere, einfache Funktion

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