вход

JavaScript переключатель контента работающий без JavaScript

Недавно, проводя исследования совершенно не имеющие отношения к теме, я наткнулся на прекрасные иллюстрации Rype Arts, которые отображались внутри JavaScript переключателя, явно работающего на JavaScript. По некоторой причине, так случилось что я посетил станицу с настройками, которые запрещали исполнение JavaScript и я обнаружил, что переключатель слайдов всё равно продолжал работать (хотя и с некоторыми недостатками).

Демонстрация

Сначала, я никак не мог понять как это работает. Нормально, с отключенными скриптами, этот тип переключателя слайдов должен был вывести только один пункт, или вывести все пункты без возможности переключения между слайдами. Немного поковырявшись, я понял, что на самом деле всё это несложно реализовать. Переключатель использует внутри страничные якоря и overflow:hidden что и обеспечивает функцию переключения.

Вот код HTML, который я буду использовать для демонстрации этого эффекта без использования JavaScript:

<div id="content-slider">  
    <ul id="content-slider-inside">  
        <li id="one">1</li>  
        <li id="two">2</li>  
        <li id="three">3</li>  
        <li id="four">4</li>  
        <li id="five">5</li>  
    </ul>  
</div>  
  
<ul id="navigation">  
    <li><a href="#one">1</a></li>  
    <li><a href="#two">2</a></li>  
    <li><a href="#three">3</a></li>  
    <li><a href="#four">4</a></li>  
    <li><a href="#five">5</a></li>  
</ul> 

Ключевая часть этого кода - это <div>с идентификатором id “content-slider”. По нормальному это элемент не должен быть необходим, потому, что вроде бы он ничего и не делает. В этом случае, тем не менее, он нужен для того, что бы скрывать невыбранный контент внутри списка, размещенного внутри него. Также, каждый элемент списка внутри переключателя слайдов имеет уникальный id, который нужен, что бы переключение работало даже без применения JavaScript.

CSS для оформления переключателя слайдов таков (я исключил все несоответствующие стили):

#content-slider {  
    width: 650px;  
    overflow: hidden;  
    height: 300px;  
}  
  
#content-slider-inside {  
    list-style: none;  
    height: 320px;      // these 3 lines  
    overflow: scroll;   // help Opera  
    overflow-y: hidden; // behave  
}  
  
    #content-slider-inside li {  
        width: 650px;  
        height: 300px;  
    } 

Несколько замечаний для выше упомянутых стилей. Внешний контейнер установлен в состояние overflow:hidden. Он также имеет ширину, равную ширине окна слайда (650px). Наконец, элементы списка имеют размеры 650px на 300px. Поскольку элемент контейнера равен одному слайду из списка и контейнер скрывает переполнение, только один элемент списка будет отображен.

Как это работает

Навигационные ссылки привязаны к внутренним якорям. Страница HTML, по умолчанию будет искать страницу с якорем, установленным как <a name="one"></a>, и если не найдет, будет подбирать якорь к соответствующему атрибуту id. Это позволит переключателю уверенно изменять контент внутри контейнера.

После установки кода, ма должны будем только добавить несколько стилей CSS, что бы все это выглядело достаточно хорошо. Переключатель также позволяет связывание посредством хэшей в URL, которое работает как с JavaScript так и без него

Источник

Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
2 комментария

Статья → JavaScript переключатель контента работающий без JavaScript

  1. BlacKKaT:

    вот те спасибо коллега … это то,что я давно искал!придумал целый велосипед и не один,а тут вот оно как все просто.Im happy))

  2. Вячеслав:

    Большое спасибо! Давно искал эту информацию:D

Оставить комментарий

Статья → JavaScript переключатель контента работающий без JavaScript

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

 

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.