jQuery скользящий контент и активное состояние навигации - PullRequest
Новая
       18

jQuery скользящий контент и активное состояние навигации

1 голос
/ 02 марта 2012

У меня есть этот код 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.

Любая помощь будет принята с благодарностью!

...