Он будет работать в браузерах, которые поддерживают document.querySelectorAll()
и псевдокласс :target
, и выдает ошибку в браузерах, которые не поддерживают (IE7 и IE8).Это связано с тем, что jQuery использует собственный браузер document.querySelectorAll()
, если он доступен, и в противном случае использует механизм выбора sizzle .Досадно, что Sizzle не поддерживает :target
селектор :
Sizzle поддерживает практически все CSS 3 селекторы - это даже включает некоторые части, которые редко реализуютсятакие как экранированные селекторы («.foo \ + bar»), селекторы Unicode и результаты, возвращаемые в порядке документа.Есть несколько заметных исключений из поддержки селектора CSS 3 (причина этого решения может быть найдена здесь ):
- : root
- : target
- : nth-last-child
- : nth-of-type /: nth-last-of-type /: first-of-type /: last-of-type /: only-of-type
- : lang ()
Поскольку sizzle не поддерживает :target
, jQuery выдаст ошибку при использовании встарые браузеры.
Попробуйте эту страницу в различных браузерах: http://jsfiddle.net/gilly3/NPNFg/
Хорошая новость заключается в том, что добавить селектор :target
довольно просто:
$.expr[":"].target = function (node) {
var t = location.hash.substr(1);
return t && node.id == t || node.name == t;
}
Рабочая демонстрация: http://jsfiddle.net/gilly3/NPNFg/3/
Редактировать: IE7 и IE8 можно работать со стилями :target
, дублируя определения стиля :target
, заменяя :target
на .target
,Обратите внимание, что вам придется дублировать все определение, потому что, если вы попытаетесь использовать псевдокласс :target
в селекторе определения правила, IE8 захлебнется им и не будет анализировать правило вообще.После дублирования ваших стилей используйте плагин hashchange и используйте этот код:
$(function () {
try {
$(":target");
}
catch (err) {
$.expr[":"].target = function (node) {
var t = location.hash.substr(1);
return t && node.id == t || node.name == t;
}
$(window).hashchange(function () {
$(".target").removeClass("target");
$(":target").addClass("target");
});
}
});
Рабочая демонстрация, адаптированная из вашего jsfiddle : http://jsfiddle.net/gilly3/c9BvU/6/