显示/隐藏div的选择/活动类

Question

所以我有这个东西，我需要一个div在任何时候显示取决于点击的按钮。我发现this大提琴这几乎是完美的，除了因为它不显示当一个链接被选中。我想要这样做，以便所选的链接可以有一个活跃的类或看起来不同于其他链接。那可能吗？我一直在查看问题，我无法真正找到答案。

如果任何人有兴趣，我使用它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

可以简化小提琴这样的：

$('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]') - 抓住所有a元件与开始于link

（2）$('#' +tmp+ 'content')一个ID - 建立选择器，如：$('#link3content ）`