Смена отображения блока при нажатии кнопки

Всем доброго времени суток. Я тут новичек, как собственно говоря и новичек в верстке. Мне нужно реализовать смену части содержимого страницы нажатием на кнопку.
Все что находится в нужно будет заметить на аналогичный. Я буду менять только текст и изображения в самом контенте. Кнопки, через которые будут происходить нажатия расположены в самом конце.

JS я не знаю еще( Что можно придумать не подскажете?

Лови: https://jsfiddle.net/podgorniy/wyb27g8e/

1 лайк

Работает!!!
Только у меня всего две кнопки, вперед и назад. Новостных блоков 5. Как к одной кнопке присвоить, чтобы последовательно менялись блоки, вперед и назад соответственно.

Вообщем, я поместил в див в тот, в котором контент расположен.
И так в каждом контенте
Получается при смене контента появляются новый контент с новыми кнопками,
а им я уже новое значение задаю.

Для этого случая задача решаться будет другим образом. Сегодня подготовлю пример

1 лайк

Т.е. Такая хитрость не пройдет?
Дело в том, что новости будут постоянно добавляться.
Так я бы просто добавлял новый div c классом target. Не смотря на то, что это “морочно”.

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

Сложности можно избежать, выбрав другую модель реализации: нужно иметь 2 кнопки, и отдельно список узлов (в смысле DOM элемент), запоминать активный узел и уметь понять.

Кстати, какое поведение должно быть когда активна последняя новость, и нажимается кнопка “следующая новость”?

Этого я и боялся.

Про DOM элемент и узлы…боюсь, что от этого я тоже еще далек.

В меню “Новости” у меня расположено 4 блока. Каждый блок кликабельный ( присутствует кнопка подборнее )
Внизу четырех блоков расположены две кнопки : Вперед и Назад. Примитивно,но понятно.

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

Но повторюсь, скорее всего откажусь от этого варианта. Будет один элемент на странице, который просто будет расширятся. Так, что вся суть в кнопках )

Кстати, какое поведение должно быть когда активна последняя новость, и нажимается кнопка “следующая новость”?

Переход на следующий блок новостей ( более свежие новости )

  • Мне возможно придется натягивать на WordPress.

Я все объяснил ужасно. И идея с сменой target ужасная. В конечном результате выходит путаница. И много мороки. + Таргет1 всегда на начальной странице, его не получится использовать, как последнюю новость. Нужно будет вручную менять содержимое. Опять же - ужасная реализация в итоге)

Вот хороший пример того эффекта, которого я хочу добиться.
\http://itc.ua/page/2/

Пробуй так: https://jsfiddle.net/podgorniy/0a53erza/

Лучше ссылкой на http://jsfiddle.net/

1 лайк

https://jsfiddle.net/jzqhn38c/ - Первый раз пользуюсь сервисом, вот что вышло.

На сайте, что я выше скинул (itcua) - Отлично показано какого результата, смены страниц новостей, я хочу достичь.
Если подставлю твой js в принципе то на то и выходит.
За исключением того, что в начале и конце кнопки след . и предыд. Не исчезают соответственно.
http://dropmefiles.com/TA2lR - вот ссылка на мой html и css ( и js ), если на fiddle ничего не понятно.

Определенно следующим шагом учу JS )

Кнопка " предыдущая " должна появляться только после того как, на странице с последними новостями нажать на кнопку следующие. Как на сайте (itsua)

Таким же образом и кнопка " Следующая " должна пропадать на последней странице с новостями, оставляя место только для кнопки " Предыдущая "

Извини, больше кодом помочь не могу. Я помогаю по отдельным аспектам, а не решаю целые задачи.

1 лайк

Вы так очень прилично помогли, благодарю!)