псевдокласс :target
недавно с удивлением обнаружил, что :target нормально работает во всех трёх браузерах. Только вместо <a name="xxx"> нужно ссылаться на id элемента. Особенно интересно сочетать это с техникой yellow fade, причём всё можно сделать на чистом css. Идея в том, чтобы ставить фоном у целевого элемента анимированный незацикленный гиф. Кстати, первым это описал Brian Suda на Think Vitamin.
:target { background-image: url('yellow-fade.gif'); }
Правда, как обычно, пришлось выдавать гуманитарную помощь обозревателю, причём он даже сопротивлялся, но в итоге всё закончилось хорошо. Проблема возникла из-за известной «фичи» ИЕ, когда document.getElementById ищет не только по id, но ещё и по name. А поскольку мы любим graceful degradation, то для старичков и параноиков нужно параллельно с id="xxx" иметь еще и якорь <a name="xxx", который мешается при поиске целевого элемента. Но банальное размещение якоря внутри элемента, а не перед ним, решает проблему.
var target, previous;
document.observe('click', function(event){
var element = event.element(),
href = element.readAttribute('href');
if (!href || !href.startsWith('#')) return;
previous && previous.removeClassName('pseudo-class-target');
target = $(href.substring(1));
if (!target) return;
target.addClassName('pseudo-class-target');
previous = target;
});
конечно, неплохо бы ещё подсвечивать цель при переходе по ссылке с внешнего документа, но это сойдёт за домашнее задание : )