Off-Canvas-Stiftung 6

Question

Ich bin neu in Javascript-Entwicklung und ich weiß nicht zu viel Jquery-Bibliothek. Ich habe diese Off-Canvas-Struktur und ich möchte den Inhalt von Divs, die nicht ausgewählt sind, ausblenden. Wie kann dies mit Jquery erreicht werden?

<div class="off-canvas-wrapper"> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
     <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas> 
      <ul class="vertical menu" id="canvasMenu"> 
       <li><a class="text-center" href="#div1">ONE</a></li> 
       <li><a class="text-center" href="#div2">TWO</a></li> 
       <li><a class="text-center" href="#div3">THREE</a></li> 
       <li><a class="text-center" href="#div4">FOUR</a></li> 
       <li><a class="text-center" href="#div5">FIVE</a></li> 
      </ul> 
     </div> 
     <div class="off-canvas-content" data-off-canvas-content> 
      <div class="content"> 
       <div id="#div1"> 
        <p>CONTENT DIV ONE</p> 
       </div> 
       <div id="div2"> 
        <p>CONTENT DIV TWO</p> 
       </div> 
       <div id="div3" > 
        <p>CONTENT DIV THREE</p> 
       </div> 
       <div id="div4"> 
        <p>CONTENT DIV FOUR</p> 
       </div> 
       <div id="div5"> 
        <p>CONTENT DIV FIVE</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Es gibt viele Möglichkeiten, um darüber zu gehen. jQuery-Methoden zum Verbergen und Anzeigen werden in diesem einfachen Beispiel verwendet.

<script type="text/javascript"> 
    function showElem(id) { 
     // first hide the contents 
     hideElems(); 

     // now show the element chosen 
     $("#" + id).show(); 
    } 

    function hideElems() { 
     $("#div1").hide(); 
     $("#div2").hide(); 
     $("#div3").hide(); 
     $("#div4").hide(); 
     $("#div5").hide(); 
    } 

</script> 

<ul class="vertical menu" id="canvasMenu"> 
    <li onclick="showElem('div1');">ONE</li> 
    <li onclick="showElem('div2');">TWO</li> 
    <li onclick="showElem('div3');">THREE</li> 
    <li onclick="showElem('div4');">FOUR</li> 
    <li onclick="showElem('div5');">FIVE</li> 
</ul> 
<div class="content"> 
    <p>*** content starts here ***</p> 
    <div id="div1"> 
     <p>CONTENT DIV ONE</p> 
    </div> 
    <div id="div2"> 
     <p>CONTENT DIV TWO</p> 
    </div> 
    <div id="div3" > 
     <p>CONTENT DIV THREE</p> 
    </div> 
    <div id="div4"> 
     <p>CONTENT DIV FOUR</p> 
    </div> 
    <div id="div5"> 
     <p>CONTENT DIV FIVE</p> 
    </div> 
    <p>*** content ends here ***</p> 
</div> 
<script type="text/javascript"> 
    hideElems(); 
</script>