Jquery 我想通过单击按钮来显示不同的div

这是我的按钮代码，我希望它们在每次单击按钮时显示相应的div。我知道我需要使用jquery来完成这项工作？不知道怎么做。任何帮助都将不胜感激，谢谢

/* ~~ buttons start here ~~ */

a.about, a.sketches, a.vectors, a.misc, a.contact {
    display:block;
    margin-left: 72px;
    margin-bottom: 45px;
}

a.about {
    width: 100px;
    height: 20px;
    background-image: url("about.png");
}

a.about:hover {
    background-image: url("about_invert.png");
}

a.about:active {
    background-image: url("about.png");
}

a.sketches {
    width: 134px;
    height: 20px;
    background-image: url("sketches.png");
}

a.sketches:hover {
    background-image: url("sketches_invert.png");
}

a.sketches:active {
    background-image: url("sketches.png");
}

a.vectors {
    width: 125px;
    height: 20px;
    background-image: url("vectors.png");
}

a.vectors:hover {
    background-image: url("vectors_invert.png");
}

a.vectors:active {
    background-image: url("vectors.png");
}

a.misc {
    width: 74px;
    height: 20px;
    background-image: url("misc.png");
}

a.misc:hover {
    background-image: url("misc_invert.png");
}

a.misc:active {
    background-image: url("misc.png");
}

a.contact {
    width: 137px;
    height: 20px;
    background-image: url("contact.png");
}

a.contact:hover {
    background-image: url("contact_invert.png");
}

a.contact:active {
    background-image: url("contact.png");
}   

/* ~~ buttons end here ~~ */

<a href="#" class="about"></a>
<a href="#" class="sketches"></a>
<a href="#" class="vectors"></a>
<a href="#" class="misc"></a>
<a href="#" class="contact"></a>

/*~~按钮从这里开始~~*/
a、 关于，a.草图，a.矢量，a.杂项，a.联系人{
显示：块；
左边距：72px；
边缘底部：45像素；
}
a、 关于{
宽度：100px；
高度：20px；
背景图片：url（“about.png”）；
}
a、 关于：悬停{
背景图片：url（“about_invert.png”）；
}
a、 关于：活动{
背景图片：url（“about.png”）；
}
a、 草图{
宽度：134px；
高度：20px；
背景图片：url（“sketchs.png”）；
}
a、 草图：悬停{
背景图片：url（“sketches_invert.png”）；
}
a、 草图：活动{
背景图片：url（“sketchs.png”）；
}
a、 载体{
宽度：125px；
高度：20px；
背景图片：url（“vectors.png”）；
}
a、 向量：悬停{
背景图片：url（“vectors_invert.png”）；
}
a、 向量：活动{
背景图片：url（“vectors.png”）；
}
a、 杂项{
宽度：74px；
高度：20px；
背景图片：url（“misc.png”）；
}
a、 杂项：悬停{
背景图片：url（“misc_invert.png”）；
}
a、 杂项：活动{
背景图片：url（“misc.png”）；
}
a、 接触{
宽度：137px；
高度：20px；
背景图片：url（“contact.png”）；
}
a、 联系人：悬停{
背景图片：url（“contact_invert.png”）；
}
a、 联系人：活动{
背景图片：url（“contact.png”）；
}   
/*~~按钮到此为止~~*/

将CSS和HTML类与

放在同一个类中。你的JS代码在哪里？按钮。。。？我只能找到css和超链接。wehre是各自的部门。。？！！对于所有引用w3schools的人，请访问，你不会从填鸭式回答中学到任何东西。
$('a').on('click',function(){
   $('div.' + $(this).attr('class')).each(function(){
       if($(this).is(':visible')){
           $('div').hide();
       } else {
           $('div').hide();
           $(this).show();
       }

   });
});