[英]Off-canvas Foundation 6
我是javascript開發的新手,並且我不太了解Jquery庫。 我有這種畫布結構,我想隱藏未選中的div的內容。 如何使用Jquery完成此操作?
<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>
有很多解決方法。 在此簡單示例中使用了jQuery hide和show方法。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.