Question

我不熟悉css或javascript，我想知道如何有一个类似于一个人在Facebook帖子上发表评论时的通知突出显示，点击后，您将被引导到具有临时突出显示的所述评论。

提前致谢

Answer 1

看起来您需要解决一些问题。我将引导您完成每个问题背后的逻辑。其中一些问题已经在线发布了解决方案，因此在这些情况下，我已将您链接到相应的页面。

1）回复点击元素

http://clubmate.fi/detect-click-with-pure-javascript/

2）滚动到页面的特定部分

Smooth scroll to specific div on click

3）突出显示元素

这涉及更改html元素的属性，例如背景颜色。这可以通过使用javascript更改类来完成，并使用css在元素具有正确的类时对其进行不同的样式

CSS：

.element {
    background-color: #0000ff; /* A blue background by default */
}
.element.highlighted {
    background-color: #ff0000; /* A red background when the element is highlighted */
}

JS：

document.getElementsByClassname('element')[0].setAttribute('class', 'element highlighted');

现在你只需要在适当的时候运行那行javascript（滚动结束后 - 第2步应该提供有关如何执行此操作的见解）

4）延迟后删除突出显示

利用javascript的setTimeout函数在延迟后移除highlight类：

JS：

setTimeout(function() {
    document.getElementsByClassname('element')[0].setAttribute('class', 'element'); // Replace "element highlighted" with just "element"
}, 1000); // 1000 means a one-second delay

Answer 2

您可以使用CSS3 document.getElementById('<%=hidLastTab.ClientID%>').value = "";属性。只需确保为其添加animation供应商前缀即可在所有主流浏览器中使用。您可以在caniuse.com找到其他CSS3属性所需的供应商前缀。

诀窍是为要突出显示的元素添加一个特殊类，并使用CSS将动画应用于该类。

试一试：

-webkit-

.post{
    padding: 1em;
    margin: .2em;
    background: #ffffff;
    border: 1px solid #eceded;
}

.post.highlighted {
    -webkit-animation: highlight 6s ease;
    animation:  highlight 6s ease;
}

@-webkit-keyframes highlight {
    from { background: #ddddff }
    to   { background: #ffffff }
}
@keyframes highlight {
    from { background: #ddddff }
    to   { background: #ffffff }
}

如何在某些场合突出显示表格中的一行

2 个答案: