当单击锚点时突出显示div

Question

我陷入了以下瓶颈：

我有一个锚链接，它指向<a>标签内的div，因此页面会滚动到最底部。

不幸的是，这个div在页面底部，所以用户很可能看不到它。

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

我不知道如何做到这一点。 我在Google上搜索，似乎可以使用jQuery来完成这个任务，但我真的不知道如何编辑脚本以符合我的需求。

非常感谢！

- nxet

---

很难说为什么McGarnagle、Praveen Kumar、undefined、Macmade、Graviton无法阅读和理解这个非常清晰的问题。当他们无法理解关于HTML的基本问题时，他们是否有资格拥有近距离权利？这肯定是一个真正的问题，任何与HTML一起工作（并且关心用户体验）的人都很可能遇到这个问题。当页面下方没有足够的内容时，浏览器无法滚动以将内部链接的目标放在页面顶部。非常简单。 - iconoclast

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

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

注意: 使用effect()需要引入以下两个JS文件：effects.core.js和effects.highlight.js。

- Praveen Kumar Purushothaman

---

你确定 animate 函数在没有 jQuery UI 的情况下能够正常工作吗？请参考 w3school。 - Jorge Leitao

animate 方法对我来说不起作用。我没有使用 jQuery UI（只是使用了 jQuery）。 - Xenon

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

希望这有所帮助！

- Chris

---

我看到你的第二个选项使用了.css属性。关于动画的好处，我之前不知道。 - Ashkan

纯CSS解决方案（第一种）非常好。波浪号（~）对我无效 - 可以使用:target代替。请参见此答案。 - Anupam

Answer 3

点击后，您可以通过.css({元素})更改div的颜色为红色，然后等待2秒钟.delay(时间)并动画回到原来的颜色.animate({元素}, 时间, 回调函数)。

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

- Eruant

Answer 4

@Chris的纯CSS解决方案非常好。对我来说~没有起作用（可能只适用于兄弟元素）

这是一个经过测试并在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 */
}

- Anupam

Answer 5

类似于以下内容。

$("#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动画来实现它。

- jeremy

---

@Abody97 你说的插件是指 jQuery 吗？这个问题有 jQuery 标签！ - Ashkan

@Ashkan 不，jQuery不能在没有插件的情况下进行颜色动画。 - Chris

$(...).css({"background-color": "#FFFFCC"}) 怎么样？ - Ashkan

@Abody97，我已经更新了我的帖子，虽然我承认我的答案不是最好的，但有多种选择总是好的。 - jeremy