выбор/активный класс для show/hide divs

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') - строит селекторы, как: $('#link3content) `