2012-08-31 132 views
0

我有名單常見問題,比如說,faq.html頁面像這樣:突出顯示特定DIV根據URL

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

我現在想脈動或只是突出那些DIVs之一,當我發訪問者通過特定的URL。在我的結帳頁面上說我有一個鏈接,說"Find help here",它鏈接到#faq2

我如何可以觸發一個簡單的亮點動畫(pulsate/blink)FAQ Div元素的背景通過在URL中加入一個觸發器,像這樣:

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

回答

4

如果可以的廣告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; 
}​ 
+0

謝謝!你將如何執行? –

+0

非常好,非常感謝! :) –

+0

@KaiBrach https://developer.mozilla.org/en-US/docs/CSS/:target – Andreas

0

爲突出它,你可以做到這一點

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

您可以使用此使用CSS :target選擇器(所以只有在片段爲#faq2時,才使用faq2,使用faq2:target{ ... })。

另外爲了設置動畫效果,請查看CSS3轉換和關鍵幀。

0
$(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

+0

使用這些jQuery UI效果需要您包含jQuery UI源代碼 – nbrooks