jquery - 单击 anchor 时突出显示 div

Question

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

我有一个指向 <a> 的 anchor 链接在 div 里面, 所以页面一直向下滚动到它。

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

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

我不知道该怎么做。我用 Google 搜索了一下，似乎这可以用 jQuery 完成，但我真的不明白如何根据我的需要编辑脚本。

非常感谢!

Answer 1

三个选择:

第一个 - 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);
};

希望对您有所帮助!