dsherbakov
@dsherbakov
Студент

Каким образом можно сделать такой список?

Передо мной встала задача сверстать вот такой список
pNZhrqANRHg.jpg
Тут просто идут в ряд блоки, при клике на каждый, должен меняться блок ниже на соответствующий
Подскажите пожалуйста, как этого добиться?
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
Stimulate
@Stimulate
могу
При клике меняйте background-image или src картинки нижнего блока на тот, что кликнули.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Mi11er
@Mi11er
A human...
Может топорно ( сорян за такое ), но сделать можно так

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li{
            display: inline-block;
            padding: 15px;
            border: 1px solid #dadada;
        }

        .block {display: none}
        .vis {display: block}
    </style>
</head>
<body>
    <ul>
        <li id="bl1" divid="b1" onclick="func(this)">Текст</li>
        <li id="bl2" divid="b2" onclick="func(this)">текст</li>
        <li id="bl3" divid="b3" onclick="func(this)">Текст</li>
    </ul>

    <div class="block" id="b1">
        <p> Первый <br>
            Lorem ipsum dolor sit amet.
            Quis recusandae inventore sequi iusto?
            Autem atque perferendis asperiores doloremque.
        </p>
        <img src="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
    </div>
    <div class="block" id="b2">
            <p> Второй<br>
                Lorem ipsum dolor sit amet.
                Quis recusandae inventore sequi iusto?
                Autem atque perferendis asperiores doloremque
            </p>
            <img src="https://images.pexels.com/photos/50632/pexels-photo-50632.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
    </div>
    <div class="block" id="b3">
            <p> Третий<br>
                Lorem ipsum dolor sit amet.
                Quis recusandae inventore sequi iusto?
                Autem atque perferendis asperiores doloremque
            </p>
            <img src="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
    </div>
    <script>
        var func = (obj) =>{
            var el = document.getElementsByClassName('block');
            for ( let i = 0; i < el.length; i++){
                el[i].classList.remove('vis');
            }
            document.getElementById(obj.getAttribute('divid')).classList.add('vis');
        }
    </script>
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы