Одностраничная навигация по сайту, выбранные состояния

Question

Новый для ТАК!Пожалуйста, предложите лучший способ сформулировать этот вопрос :)

У меня есть одностраничный сайт с вертикальной прокруткой и фиксированной панелью навигации, расположенной в нижнем колонтитуле.Я использую local.scroll и якоря, чтобы связать навигацию с div на странице.

Я бы хотел, чтобы пользователь мог щелкнуть одну ссылку и перевести ее в выбранное состояние.Я просто не уверен, как стилизовать / кодировать ссылки для одной страницы (вместо использования class = "select" для каждой активной ссылки, как на сайтах с несколькими страницами.)

Этот сайт имеет примерЯ хотел бы выполнить: http://www.kristaganelon.com/#portfolio-section

Answer 1

Посмотрите на JQuerys .toggleClass (имя класса) .Вы можете предоставить запасной вариант с помощью псевдоклассов css (не равных javascript-решению, поскольку оно временное).

Answer 2

В приведенном вами примере используется Javascript (в форме популярной библиотеки JQuery) для создания выбранного состояния в навигации, а также для прокрутки страницы.

JQuery

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

На сайте JQuery есть множество полезных руководств, но простое событие щелчка выглядит примерно так:

    $(document).ready(function(){
      $('.button').click(function(){
        alert('You clicked me!');
    });
});

Вы можете использовать .addClass JQuery, чтобы щелкнуть элемент, чтобы придать ему определенное визуальное состояние:

$(document).ready(function(){
      $('.button').click(function(){
        $(this).addClass('clicked');
    });
});

Я предлагаю вам просмотреть документацию по библиотекам и научиться сначала включать его на свою страницуа затем просмотрите некоторую базовую привязку событий, переключение (так как вам понадобится это для удаления активного состояния) и т. д. Изучение этих вещей поможет вам намного проще создавать интерактивные элементы.