#javascript #jquery #css
#javascript #jquery #css
Вопрос:
Я знаю, что это проблема JS / jQuery, и у меня очень приличные навыки CSS, но, к сожалению, мои знания JS меня подводят. Недавно я купил шаблон веб-сайта для своего портфолио. Это хороший вариант, но я действительно изо всех сил пытаюсь его адаптировать.
Чего я пытаюсь добиться, так это:
- при прокрутке колесиком мыши (вверх или вниз) каждого блока содержимого ссылки ниже (внизу страницы) активны на основе содержимого выше. Вперед и назад. Таким образом, в основном текстовые ссылки внизу будут выделены жирным шрифтом в зависимости от активного содержимого над ним.
- Я также хотел бы, чтобы текстовые ссылки ниже ссылались на соответствующий контент выше. т.е. Project 3 откроет содержимое Project 3 (с анимацией содержимого).
Для начала я попытался настроить таргетинг на каждый идентификатор для блоков содержимого. т.е. id =»project-3″, затем добавив href =»#project-3″, но это явно не работает. Я также пробовал data-target=»#project-3″. По-прежнему нет кубиков.
Я пытаюсь имитировать нижнюю навигацию этого замечательного сайта здесь: http://fakemusic.fr / (таким образом, когда вы прокручиваете каждого исполнителя, ссылки ниже подсвечиваются на них можно кликать.
Я создал здесь Codepen:
[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)
Заранее извиняюсь, я не мог понять, как деактивировать раздражающий предварительный загрузчик.
Заранее спасибо!
Комментарии:
1. вы хотите выделить номер проекта, который является текущим, я прав?
2. Все еще не могу заставить это работать. Если кто-нибудь может помочь, но им нужно больше информации или ввода от меня. Дайте мне знать. Спасибо!
Ответ №1:
С Jquery это очень просто
Присвойте уникальный идентификатор данных каждому вашему классу «display-table» и укажите уникальный идентификатор также в привязке «menu-item»
создайте класс css, у которого есть выделенный css, например подчеркивание
затем попробуйте jquery conditional js, например, если ваш «класс отображения таблицы» имеет класс «projects-item-active», затем добавьте класс в идентификатор привязки и удалите из siblings
и если кто-то нажмет на якорь, добавьте класс «проекты-элемент-активные проекты-элемент-анимация» в «дисплей-таблица» и удалите из siblings.
щелкните проект 1 проект 2 проект 3 и посмотрите
Добавлено перо
[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp
Комментарии:
1. Неплохо. Я попробую. Спасибо!
2. я отредактировал свой ответ и добавил, что первые три ссылки работают (Y)
3. Выглядит действительно хорошо, спасибо. Единственное, что это нарушает прокрутку колеса мыши. т. е. При использовании колеса мыши содержимое застревает на «активном» содержимом. Таким образом, он не переходит к предыдущему проекту или следующему. Кроме того, мне бы очень хотелось, чтобы нижние ссылки менялись / выделялись при прокрутке колесика мыши по содержимому? Если это имеет какой-то смысл?
4. поскольку, когда функция прокрутки включена, «проекты-элемент-анимация» заменяется на «проекты-количество-скрыть», вы должны применить это также к классу «проекты-элемент-активный»
5. я обновил перо, надеюсь, это поможет codepen.io/mamun-rashid-raja/pen/zYBLRrp