Question

我有一个常见问题解答列表，例如，页面faq.html，如下所示：

<div id="faq1">...</div>
<div id="faq2">...</div>

当我通过特定网址向访问者发送时，我现在想要激活或只是突出显示其中一个DIVs。在我的结帐页面上说我有一个链接说"Find help here"，它链接到#faq2。

如何在(pulsate/blink) 元素的背景中触发简单的高光动画FAQ Div 在URL中添加触发器，如下所示：

http://www.test.com/faq.html?highlight=faq2

Answer 1

如果您可以在网址上添加fragment，则可以使用CSS :target伪类。

http://jsfiddle.net/9yNVp/

HTML：

<a href="#see" id="see">See</a> <a href="#works" id="works">works</a> <a href="#well" id="well">well</a>

CSS：

a:target{
    transition:background-color 1s ease-in;
    -webkit-transition:background-color 1s ease-in;
    -moz-transition:background-color 1s ease-in;
    background-color: yellow;
}

Answer 2

突出显示它你可以这样做

var Blinkcnt = 0;
function BlinkDiv(DivId) {
    if (Blinkcnt % 2 == 0) {
        $('#' + DivId).animate({ backgroundColor: "#E1E1E1" }, 500);
        Blinkcnt += 1;
    }
    else {
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
        Blinkcnt += 1;
    }
    if (Blinkcnt < 10) {
        setTimeout(function () {
            BlinkDiv();
        }, 500);
    }
    else {
        Blinkcnt = 0;
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
    }
}

Answer 3

您可以使用CSS :target选择器来使用此选项（仅当片段为faq2时才定位#faq2，使用faq2:target { ... }）。< / p>

同样要设置动画，请查看 CSS3过渡和关键帧。

Answer 4

$(function() {
    var params = window.location.href.split('?')[1].trim().split('&');
    var location = '';

    for( var i=0; i<params.length; i++ ) {
        var pair = params[i].split('=');
        location = pair[0] ==='highlight' ? pair[1] : '';
    }

    if ( location ) {
        $('#'+location).effect("highlight", {}, 3000);
        // or $('#'+location).effect("pulsate", { times:3 }, 2000);
    }
});

http://docs.jquery.com/UI/Effects/Highlight
http://docs.jquery.com/UI/Effects/Pulsate

根据URL突出显示特定的DIV

4 个答案: