Выделение div при нажатии на якорь

Я обнаружил, что застрял в этом:

У меня есть привязка, которая указывает на <a> внутри a div, поэтому страница прокручивается вплоть до нее.

К сожалению, div находится в нижней части страницы, поэтому, скорее всего, он не увидит его.

Я подумал, что хороший способ решить это - изменить класс div при нажатии ссылки, например, переключить цвет границы на красный, а затем вернуться к нормальному состоянию через 2 секунды.

Я не знаю, как это сделать. Я Googled вокруг, и кажется, что это можно сделать с помощью jQuery, но я действительно не понимаю, как редактировать сценарии для моих нужд.

Спасибо большое!

Ответы

Ответ 1

Да, вы можете сделать Желтый трюк Fade двумя способами:

Использование псевдо-класса :target:

<section id="voters"> 
   Content
</section>

Соответственно CSS

:target {
   background: yellow;
}

Использование метода Yellow Fade

В функции щелчка, если есть, вы можете сделать так:

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).effect("highlight", {}, 1500);
});

Или используя animate():

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).animate({"background-color": "#ffc"}).delay(2000).animate({"background-color": "transparent"});
});

Fiddle: http://jsfiddle.net/HnERh/

PS: Для использования effect() вам нужно иметь эти два JS: effects.core.js и effects.highlight.js.

Ответ 2

Три варианта:

Первый - CSS3

Используйте этот метод, если вы действительно не заботитесь о поддерживая все браузеры. Это чистый CSS, так что преимущество. Здесь схема (включает несколько версий правил для нескольких браузеров):

.youranchorsclass:active ~ #yourdivsid { /*when the anchor is active (clicked)*/
   -moz-animation: myanimation 1s;
   -webkit-animation: myanimation 1s;
   -o-animation: myanimation 1s;
   animation: myanimation 1s;
}
@-moz-keyframes myanimation, @-webkit-keyframes myanimation, @-o-keyframes myanimation, @keyframes myanimation {
   from { background: red; }
   to { background: white; /*or whatever it was originally*/ }
}

(Если вы хотите избавиться от всех этих уродливых правил с префиксом, посмотрите PrefixFree).

Второй - jQuery

Используйте это, если вы заботитесь о поддержке более старых браузеров. Включите jQuery на своей странице, чтобы начать с этого, вставив его в свой head:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type = "text/javascript"></script>

Тогда:

$(".yourlink").click(function() {
   $("#yourdivid").css("background", "red").delay(1000).css("background", "white");
};

Обратите внимание, что этот метод jQuery не постепенно меняет цвет, вам нужно будет включить плагин (например, jQuery UI), чтобы сделайте это.

Третий - чистый JavaScript

Используйте это, если вы не хотите включать относительно огромную библиотеку только для такого небольшого эффекта. Это довольно просто, вот прокомментированный план, чтобы вы начали:

function changeDivColor(color) {
    document.getElementById("yourdivid").style.backgroundColor = color;
}
document.getElementById("youranchor").onClick = function() { //when the anchor is clicked
    changeDivColor("red"); //chang the div color to red
    setTimeout(function() { //wait 1000 milliseconds (1s) -- see below
        changeDivColor("white"); //then change it back to white
    }, 1000);
};

Надеюсь, что это помогло любым способом!

Ответ 3

При нажатии вы можете изменить цвет div на красный .css({ elements }), затем подождите 2 секунды .delay( time ) и вернуться к исходному цвету .animate({ elements }, time, callback)

$(document).ready() {
    $('a[href^="#"]').click(function(){
        $('div.divs_class_or_id_name').css('border','solid 1px #ff0000').delay(2000).animate({
            border: 'solid 1px #000000'
        }, 500, function() {
            // animation complete
        });
    });
};

Ответ 4

Что-то похожее на следующее.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#element").offset().top
    }, 2000);
    $("#element").animate({
        "background-color": "#FFFFCC"
    }).delay(2000).animate({
        "background-color": "#00FFFF" //original background color
    });
});

Обязательно включите плагин jquery, который позволяет анимацию цветов, например http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js.

Хотя решение @praveen-kumar :target кажется приятным, вы можете сделать это чисто с анимацией css3, я полагаю.