单击 link 时在 canvas 侧边栏中显示 div

Question

我有下面的代码，当您单击 link 时，我正在尝试 show/hide 一个 div。基本上，单击 link 会将 "active" class 添加到 div，这反过来会删除 "hide" class 和 display:block 代替。我遇到的问题是我希望这个 div 到 display/hide 在关闭的 canvas 菜单中。我似乎无法让它工作。

样式：

<style>
.hide{
 display:none;
}
.active{
 display:block;
}
</style>

链接：

<ul id="items" style="float:right;">
        <li>
            <a href="#1" class="slideLeft">item 1</a>
        </li>
        <li>
            <a href="#2" class="slideLeft" >item 2</a>
        </li>
        <li>
            <a href="#3" class="slideLeft" > item 3</a>
        </li>
</ul>

分区：

<div class="you padded">            
    <div id="1" class="hide">
        <h1>First story</h1>
        <p>Lorem ipsum dolor.</p>
    </div>      
    <div id="2" class="hide">
        <h1>Second story</h1>
        <p>Proin at eros non eros.</p>
    </div>     
    <div id="3" class="hide">
        <h1>Third story</h1>
        <p>Nunc auctor bibendum eros.</p>
    </div>

脚本

$( 'li' ).on( 'click', function() {
    $('#1,#2,#3').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});

这里是link实际页面：

http://lavacable.com/satc/eb/rightonly.html

Answer 1

$( 'li a' ).on( 'click', function() {
        $('#1,#2,#3').removeClass( 'active' ).eq( $(this).parent().index() ).addClass( 'active' );
    });

单击 link 时在 canvas 侧边栏中显示 div

Show div in off canvas sidebar when clicked on link

javascript

jquery

off-canvas-menu