单击锚点时突出显示 div

Question

我发现自己被这个困住了：

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

很遗憾，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

类似于以下内容。

$("#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 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

三个选择：

第一个 - 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 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 */
}