jquery - jQuery スライド コンテンツとナビゲーションのアクティブ状態

Question

クリックしたリンクに基づいてコンテンツをスライドさせるこのjQueryコードがあり、リンクのホバー効果もあります。

$("#nav a").hover(function() {
    $(this).stop().animate({ paddingTop: "60px" }, 500);
}, function() {
    $(this).stop().animate({ paddingTop: "50px" }, 500);
});

var firstTime = true;
$("#nav a").click(function() {
    var divname = this.id;
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
        } else {
            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");
            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }
});

そして、これがHTMLです

<div id="nav">
    <ul>
        <li><a id="ett">ett</a></li>
        <li><a id="tva">två</a></li>
        <li><a id="tre">tre</a></li>
        <li><a id="fyra">fyra</a></li>
    </ul>
</div>  

私の質問は、リンクをクリックしたときにリンクにアクティブな状態を追加し、もう一度クリックするとリンクが消える方法です。そして、別のリンクをクリックすると、アクティブ状態が切り替わりました。

#nav li a.active {
    background-color: #242424;
    color: #FFFFFF;
    padding-top: 60px;
}

また、パディングが 50px に下がらず、60px のままになるように、アクティブなリンクのアニメーションを防止する必要があります。

どんな助けでも大歓迎です！