selection/active class 对于 show/hide div

Question

所以我有这个东西，我需要一个 div 根据单击的按钮随时显示。我发现 this 很棒 fiddle 几乎是完美的除了因为它在选择 link 时不显示。我想要它，以便所选的 link 可以具有某种活动的 class 或看起来与其他 link 不同。那可能吗？我一直在查看问题，但我真的找不到答案。

如果有人感兴趣，我正在使用它for this（但是代码真的很乱，抱歉）。（我还想更改顶行的过滤器按钮以重置和过滤所有图像，但我知道这是一个不同的问题。仍然不胜感激！）

html

<div id="linkwrapper">
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

jquery

$(document).ready(function(){

    $("#infocontent").hide();
    $("#infocontent div").hide();


    $('#linkwrapper a[id]').click(function(){

        var vsubmen = this.id +"content";  

        if( $("#infocontent").is(":visible") == false ) {
            $("#" + vsubmen).show('fast',function() {
                $("#infocontent").slideDown();
            });
        } else if ( $("#" + vsubmen).is(":visible") == false ) {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
                $("#" + vsubmen).show();
                $("#infocontent").slideDown('slow');    
            });
        } else {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
            });
        }
        return false;
    });

});

Answer 1

您可以像这样简化 fiddle：

$('a[id^=link]').click(function(){
    $('a[id^=link]').removeClass('meactive');
    $(this).addClass('meactive');

    $('#infocontent>div').slideUp();

    var tmp = this.id;
    $('#'+tmp+'content').slideDown();
}); //end a.click

jsFiddle Demo

备注：

(1) $('a[id^=link]') -- 抓取 ID 以 link

开头的所有 a 元素

(2) $('#' +tmp+ 'content') -- 构建如下选择器：$('#link3content)`

selection/active class 对于 show/hide div

selection/active class for show/hide divs

html

javascript

css

jquery

toggle