Question

这是我的按钮代码，我希望它们在每次点击按钮时显示相应的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>

Answer 1

将相同的类与<a>标记放在通讯<div>标记中，并按类调用它们：

$('a').on('click',function(){
   $('div.' + $(this).attr('class')).each(function(){
       if($(this).is(':visible')){
           $('div').hide();
       } else {
           $('div').hide();
           $(this).show();
       }

   });
});

小提琴：

http://jsfiddle.net/vWT5t/1/

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

1 个答案: