ToggleClass to link to indicated div off-canvas?

Question

我在一个页面上有多个图像，我希望每个图像在点击后 link 到一个单独的页面 - canvas。目前，每张图片 links 到同一页面，我想弄清楚如何分别点击每张图片。我已经简化了下面的代码，但这里有一个 link 到完整的 Pen：http://codepen.io/anon/pen/KwQYvm?editors=110

<div class="container">

  <section id="slider">
    <div id="section-1" class="fullpage">
      <a href="#slider">
      <h1>Header</h1>
      <a href="#" class="menu-close">⇉</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo aliquid iste consectetur incidunt dolorem inventore rerum, tempore quis nulla iure eveniet nostrum, saepe itaque mollitia modi ex. Cum, nam odio.</p>
    </div>

    <div id="section-2" class="fullpage">
      <a href="#slider">
      <h1>Header</h1>
      <a href="#" class="menu-close">⇉</a>
      <p>porem ipsum dolor sit amet, consectetur adipisicing elit. Quo aliquid iste consectetur incidunt dolorem inventore rerum, tempore quis nulla iure eveniet nostrum, saepe itaque mollitia modi ex. Cum, nam odio.</p>
    </div>
 </section>

 <ul id="images">
   <li><a href="#section-1" class="menu-link"><img src="https://placekitten.com/g/200/300" alt="" /></a></li>
   <li><a href="#section-2" class="menu-link"><img src="https://placekitten.com/g/200/300" alt="" /></a></li>
 </ul>

</div><!--container-->

CSS:

.container {
    background: gray;
    -webkit-transition: 1.15s ease;
    -moz-transition: 1.15s ease;
    -o-transition: 1.15s ease;
    transition: 1.15s ease;
}

#slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 100%;

    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 1.15s ease;
    -moz-transition: 1.15s ease;
    -o-transition: 1.15s ease;
    transition: 1.15s ease;
}

#slider > div {
    position: absolute;
}

.container.active {
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.fullpage {
    height: 100vh;
}

和 JS：

$('.menu-link').click(function() {
  $('#slider').toggleClass('active');
  $('.container').toggleClass('active');
});

$('.menu-close').click(function() {
  $('#slider').toggleClass('active');
  $('.container').toggleClass('active');
});

Answer 1

你能做什么：

1) 隐藏两个部分，将 hidden class 添加到每个

.hidden{  visibility:hidden;  }
...
<div id="section-1" class="fullpage hidden">
<div id="section-2" class="fullpage hidden">

2)单击.menu-link时需要显示相应的部分。在这里你可以使用你的 link 指向它的事实：

$('.menu-link').click(function() {
  $('#slider').toggleClass('active');
  $('.container').toggleClass('active');
  $($(this).attr('href')).removeClass('hidden');//here you find the section and make it visible
});

3) 您需要在单击 menu-close 时将其隐藏起来，对于 menu-close 目标部分是其父部分，因此您可以这样做：

$('.menu-close').click(function() {
  $('#slider').toggleClass('active');
  $('.container').toggleClass('active');
  $(this).parent().addClass('hidden');//here you hide the section
});

ToggleClass to link to indicated div off-canvas?

ToggleClass to link to individual divs off-canvas?

html

javascript

css

jquery

toggleclass