浏览各种子div

Question

基本上我正在使用与http://keepearthquakesweird.com/类似的网站。

我不擅长jQuery，除了基本的东西，但已经在html5和css3中创建了布局。我遇到的问题是，如果你在点击输入链接后在网站上看到它将你带到网格。
我创建了精确的网格，当用户通过以下方式点击各种链接时能够提取各种div内容方法（你可以在下面看到我的代码）使用css3 + jquery。
所以问题是当用户点击链接时有更好的方法来提升div。主要问题是我需要单击任何字母表时提到的网站中的下一个上一个按钮，以便您可以浏览描述div。
寻找一些诚实的建议和解决方案：）

＆＃13;

＆＃13;

$('a#alpha').click(function(e) {
  e.preventDefault();
  var id = $(this).attr('data-id');

  $("#container > div").each(function() {
    if ($(this).attr('data-id') == id) {
      $(this).toggleClass('show-content');
    }
  });
});

$("a#cls").click(function() {
  $("#container > div").each(function() {
    if ($(this).hasClass('show-content')) {
      $(this).removeClass('show-content');
    }
  })
})

＆＃13;

#container div {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  transform: translateY(100%);
  -webkit-transform: -webkit-translateY(100%);
  -moz-transform: -moz-translateY(100%);
  -o-transform: -o-translateY(100%);
  transition: .4s ease-in all;
  -webkit-transition: .4s ease-in all;
  -moz-transition: .4s ease-in all;
  z-index: 6;
  opacity: 1;
}
.closeBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: #fff;
}
#content-1 {
  background: #333;
}
#content-2 {
  background: #ff0;
}
#content-3 {
  background: #f00;
}
.show-content {
  opacity: 1 !important;
  z-index: 5 !important;
  transform: translateY(0%) !important;
  -webkit-transform: -webkit-translateY(0%) !important;
  -moz-transform: -moz-translateY(0%) !important;
  -o-transform: -o-translateY(0%) !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" data-id="01" id="alpha">Link to pull div</a>
  </li>
  <li>
    <a href="#" data-id="02" id="alpha">Link to pull div</a>
  </li>
  <li>
    <a href="#" data-id="03" id="alpha">Link to pull div</a>
  </li>
</ul>

<div id="container">
  <div id="content-1" data-id="01">
    <a href="#0" class="closeBtn" id="cls">X</a>
    <h1>TITLE</h1>
  </div>

  <div id="content-2" data-id="02">
    <a href="#0" class="closeBtn" id="cls">X</a>
    <h1>TITLE</h1>
  </div>

  <div id="content-3" data-id="03">
    <a href="#0" class="closeBtn" id="cls">X</a>
    <h1>TITLE</h1>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;