Как сделать чтобы в скроле менялся контент?
Как сделать скрол-меню, чтобы при выборе одного из пунктов этого меню менялся контент. Примерно как в этом видео
https://cloud.mail.ru/public/J8vB/LGHhrRe2X
Дополнительно:
Разместите код в песочнице.
...
Audi
Volkswagen
Opel
JAVASCRIPT
var list = {
'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.',
'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.',
'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.'
}
var el = document.querySelector('.container');
el.addEventListener('change', function() {
document.querySelector('.output').textContent = list[el.value];
});
codepan
размещал код в песочнице, все работает, но при выгрузке файлов на сервер просто выпадающее меню
Что пишет в консоли там, где не работает?
https://cloud.mail.ru/public/uM2S/Z98K7QFzc
Что пишет в консоли там, где не работает?
Я понимаю, что не работает, что в консоли пишет? Браузер (с неработающим кодом) > F12 > console. Скорее всего путь до скрипта не верный...
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
Это у Вас addBlock либо сам браузер заблочил подключение какого то скрипта, не факт, что именно Вашего.
- У Вас 2 контейнера на странице (нужный Вам - второй), какой элемент по счету получает querySelector()?
- Если Вы не знаете точно, зачем Вам получать элементы по классам, или это единственный получаемый такой элемент - используйте id.
Ниже исправленный код, все работает. Вам необходимо добавить в верстке id="select" для списка, и id="output" для вывода:
const list = { 'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.', 'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.', 'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.' } document.addEventListener('DOMContentLoaded', () => { const select = document.querySelector('#select'); const output = document.querySelector('#output'); select.addEventListener('change', () => { output.textContent = list[select.value]; }); }); |
const list = { 'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.', 'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.', 'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.' } document.addEventListener('DOMContentLoaded', () => { const select = document.querySelector('#select'); const output = document.querySelector('#output'); select.addEventListener('change', () => { output.textContent = list[select.value]; }); });
КартинкО
- все также, выпадающее меню есть, а текста нет
- gabysyss, можете сами посмотреть www.scourage.ru/ledi-bag-i-super-kot-5-sezon
- gabysyss, обновил ответ
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать изменение контента в скроле, можно воспользоваться JavaScript. Вот пример кода, который поможет вам достичь этого эффекта:
```html
#scroll {
height: 100px;
overflow: auto;
}
Содержимое скрола 1
let content = document.getElementById('content');
let scroll = document.getElementById('scroll');
let count = 1;
function changeContent() {
content.innerHTML = '
Содержимое скрола ' + count + '
';
count++;
}
setInterval(changeContent, 3000); // меняем контент каждые 3 секунды
```
В данном примере мы создаем блок с id "scroll", внутри которого находится блок с id "content", в котором будет меняться контент. С помощью JavaScript мы устанавливаем интервал, с которым будет меняться содержимое блока "content". В данном случае контент будет меняться каждые 3 секунды.
Вы можете настроить интервал изменения контента, а также сам контент, который будет отображаться в скроле. Важно помнить, что данный код можно доработать и дополнить в зависимости от вашего конкретного случая использования.