Выделите конкретный DIV в зависимости от URL

Question

У меня есть список Вопросы и ответы, скажем, на странице faq.html так:

<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

Answer 1

Если вы можете устанавливает fragment к URL вы можете использовать псевдокласс класса 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{ ... }).

Также, чтобы оживить его, просмотрите Переходы 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