Якорный тег не работает в слайдере CSS

Я хотел бы использовать следующий слайдер CSS в моем проекте

http://jsfiddle.net/63w9jnqq/1/

Он не использует JavaScript или jQuery. Когда я нажимаю ссылку на любом слайде, отличном от 'slide 5', я вернусь назад к первому 'слайду 5' вместо открытия новой вкладки. Это тяжелый код CSS, я понятия не имею, как его исправить. У меня нет проблем с использованием дополнительных jQuery или JavaScript для устранения этой проблемы.

Я попробовал следующий jQuery, чтобы остановить действие click, он не работает

$(document).ready(function(){
    $(".slide-gfx a").click(function(event){
        event.preventDefault();
    });
});

Ответы

Ответ 1

: состояние фокусировки

Причина этой проблемы сводится к тому, что слайд-шоу полагается на обработку :focus CSS для запоминания состояния. Это очень временный обработчик, который теряется всякий раз, когда фокусируется новый элемент. Я построил слайд-шоу больше для неинтерактивных элементов, просто для демонстрационной работы - это отлично работает с :focus

Слайд-шоу возвращается назад к слайду 5 (или концевому слайду), когда ни одна из слайдов не сфокусирована. Это было хорошо для моих нужд, но, очевидно, не для вашего прецедента. Это происходит, когда вы фокусируетесь на своих элементах <a href="" />.

Ограничения css

К сожалению, нет способа сопоставления (в текущем CSS) до родителя от сфокусированного ребенка - по крайней мере, этого я не знаю. Это позволило бы решить проблему с помощью чистого CSS. Очевидно, что вы можете совпадать вниз (т.е. parent:focus .child), но это не помогает. Вы можете использовать флажок/радио-хак, который я рассматривал в то время, или вы можете переключиться на использование другого способа "запоминания состояния" ".

: целевое состояние

CSS в оригинальной демонстрации уже был адаптирован для поддержки :target в качестве альтернативы, поэтому вы можете исправить текущую функциональность небольшим количеством JS. Однако я бы не стал полагаться на это в старых браузерах, но, опять же, старым браузерам, вероятно, было бы сложно справиться с этой системой.

Фрагмент и скрипка

Этот патч прослушивает событие :focus и устанавливает фрагмент в URL-адресе в соответствии с идентификатором слайда. Это означает, что CSS затем переключается на прослушивание селекторов :target, что должно сохранить выбранный правый слайд.

http://jsfiddle.net/63w9jnqq/4/

$('.slide').on('focus',function(e){
  window.location.hash = $(this).attr('id');
});

Рекомендации

В будущем, я бы предложил, возможно, взглянуть на более современные методы внедрения CSS. Поскольку я уверен, что есть много новых улучшений, которые можно было бы использовать для расширения системы - в последнее время у меня не было времени. Возможно, даже есть возможность интегрировать события touch-style, чтобы сделать вещи более естественными для мобильных устройств, хотя, возможно, это просто принятие желаемого за действительное.

В конце дня, хотя в этом решении много CSS, лучше всего попробовать и понять каждую часть кода, который вы используете в своих проектах, поскольку это помогает отлаживать ситуации, которые могут возникнуть Здесь эта проблема упоминается в исходном сообщении здесь, и решение, использующее :target, используется для обработки ссылок "sub nav":

Реализовать слайд-шоу/карусель только для CSS со следующими и предыдущими кнопками?