关闭-canvas 基金会 6

Question

我是 javascript 开发新手，我不太了解 Jquery 库。我有这个 off-canvas 结构，我想隐藏未选中的 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>

Answer 1

有很多方法可以解决这个问题。 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>

关闭-canvas 基金会 6

Off-canvas Foundation 6

jquery

hide

zurb-foundation-6