Имеет ли jQuery псевдокласс: target, похожий на CSS3? - PullRequest
3 голосов
/ 16 декабря 2011

Имеет ли jQuery псевдокласс :target, подобный CSS3?

Если это так, демо было бы неплохо.

Спасибо!

Ответы [ 3 ]

5 голосов
/ 16 декабря 2011

Встроенный, я так не думаю, но вы могли бы подстроить его так:

$(location.hash);

РЕДАКТИРОВАТЬ: Спасибо, Грэм !

ДРУГОЕ РЕДАКТИРОВАНИЕ: Вот пример jQuery, эквивалентный :target.Поскольку старые браузеры могут не распознавать событие window.onhashchange, а location.hash обычно обновляется в конце обработчика для события onclick привязанного тега (что делает новый хэш недоступным для селектора jQuery во время обработчика, если только location.hash = this.href.substring(this.href.indexOf('#'));вызывается заранее), вместо этого мы должны использовать усеченное href значение щелкаемой привязки в качестве селектора: http://jsfiddle.net/xPMzV/

3 голосов
/ 16 декабря 2011

Он будет работать в браузерах, которые поддерживают 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/

1 голос
/ 16 декабря 2011

Легко, просто сделай:

   $(window.location.hash)
...