单击锚点时突出显示div

Question

我发现自己坚持这个：

我有一个锚点链接指向<a>内的div，因此页面一直滚动到它。

不幸的是，div位于页面的底部，因此用户很可能看不到它。

我认为解决此问题的一个好方法是在点击链接时更改div的类，例如将边框颜色切换为红色，然后在2秒内淡出恢复正常。

我不清楚如何做到这一点。我用Google搜索，似乎可以使用jQuery完成，但我真的不明白如何根据我的需要编辑脚本。

非常感谢！

Answer 1

是的，您可以通过两种方式执行黄色淡化技巧：

使用:target伪类：

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

分别是 CSS

:target {
   background: yellow;
}

使用黄色渐变技术

在点击功能中，如果有，可以这样做：

$('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"});
});

小提琴：http://jsfiddle.net/HnERh/

PS：要使用 effect() ，您需要拥有以下两个JS： effects.core.js 和 effects.highlight.js 。

Answer 2

三种选择：

第一个 - CSS3

如果您不关心supporting all browsers，请使用此方法。这是纯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);
};

希望以任何方式提供帮助！

Answer 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
        });
    });
};

Answer 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动画完全做到这一点。

Answer 5

@Chris 的纯 CSS 解决方案很棒。 ~ 对我不起作用（可能仅适用于 siblings）

这是一个经过测试并在 2021 年生效的变体：

#targetdivid:target { /* i.e when this element is navigated to (from a link) */
   animation-name: ref-animation;
   animation-duration: 3s;
}
@keyframes ref-animation {
   from { background-color: #FFFFCC;     }  /* light yellow */
   to   { background-color: transparent; }  /* assuming original was transparent */
}