Javascript 浏览各种子div

基本上我在类似的网站上工作

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

$（'a#alpha'）。单击（函数（e）{
e、 预防默认值（）；
var id=$（this.attr（'data-id'）；
$（“#容器>div”）。每个（函数（）{
if（$（this）.attr（'data-id'）==id）{
$（this.toggleClass（'show-content'）；
}
});
});
$（“a#cls”）。单击（函数（）{
$（“#容器>div”）。每个（函数（）{
if（$（this）.hasClass（'show-content'））{
$（this.removeClass（'show-content'）；
}
})
})

#容器分区{
宽度：100%；
最小高度：100%；
位置：绝对位置；
排名：0；
转化：translateY（100%）；
-webkit transform:-webkit translateY（100%）；
-莫兹变换：莫兹变换（100%）；
-o-transform:-o-translateY（100%）；
过渡：在所有方面都很轻松；
-webkit过渡：.4s，轻松自如；
-moz过渡：.4s，共轻松；
z指数：6；
不透明度：1；
}
.关闭{
位置：固定；
顶部：20px；
右：20px；
字体大小：30px；
颜色：#fff；
}
#内容-1{
背景：#333；
}
#内容-2{
背景：#ff0；
}
#内容-3{
背景：#f00；
}
.显示内容{
不透明度：1！重要；
z指数：5！重要；
转换：translateY（0%）！重要；
-webkit转换：-webkit translateY（0%）！重要；
-莫兹变换：-莫兹变换（0%）！重要；
-o-转换：-o-转换（0%）！重要；
}

标题
标题
标题

@ManojKumar他的第一个版本似乎有所不同；但后来意识到它们都坏了/不起作用，所以在你回复之前，我删除了评论：）我很难理解问题是什么，或者试图表现出什么；如果他们真的破产了或者我错过了什么exemplifies@Quoid哦，不。我只是调整了代码：）让我们等OP弄清楚它。@ManojKumar，它又发生了！：）是的，对不起，这个问题有什么困惑吗？如果是，我想要的是在你点击链接并显示div之后，我想要下一个和上一个按钮转到下一个div和上一个div。。。如果我对任何事情不清楚，请告诉我：）@ManojKumar他的第一个版本似乎不同；但后来意识到它们都坏了/不起作用，所以在你回复之前，我删除了评论：）我很难理解问题是什么，或者试图表现出什么；如果他们真的破产了或者我错过了什么exemplifies@Quoid哦，不。我只是调整了代码：）让我们等OP弄清楚它。@ManojKumar，它又发生了！：）是的，对不起，这个问题有什么困惑吗？如果是，我想要的是在你点击链接并显示div之后，我想要下一个和上一个按钮转到下一个div和上一个div。。。如果我对任何事情不清楚，请告诉我：）