Переключение карточек с текстом с помощью кнопок

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

var btnActive = document.querySelectorAll(".time-btn");

for (var button of btnActive) {
    button.addEventListener('click', function() {
        btnActive.forEach(i => i.classList.remove('active-btn'));

        this.classList.toggle('active-btn');
    });
};

var btnActive = document.querySelectorAll(".time-btn");

for (var button of btnActive) {
    button.addEventListener('click', function() {
        btnActive.forEach(i => i.classList.remove('active-btn'));

        this.classList.toggle('active-btn');
    });
};
.times-buttons {
    display: flex;
    justify-content: space-around;
    margin: 10px 10px 10px;
}

.time-btn {
    border: none;
    background: none;
    color: #03a898;
    font-size: 10px;
}

.active-btn {
    color: red;
    border: 2px solid #03a898;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.factory-store-card {
    margin-bottom: 90px;
}

.factory-img-style {
    max-width: 480px;
    max-height: 310px;
}

.card-date {
    margin-bottom: 38px;
    color: red;
    text-align: center;
}

.card-date-text {
    color: #03a898;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}
<div class="factory-store-inner">
                    <h2 class="factory-store-title">История завода</h2>
                    <div class="times-buttons">
                        <button class="time-btn active-btn" id="time-btn">1931-1961</button>
                        <button class="time-btn" id="time-btn">1973-1987</button>
                        <button class="time-btn" id="time-btn">1992-1996</button>
                        <button class="time-btn" id="time-btn">2002-2008</button>
                        <button class="time-btn" id="time-btn">2009-2012</button>
                        <button class="time-btn" id="time-btn">2012-2014</button>
                        <button class="time-btn" id="time-btn">2015-2017</button>
                        <button class="time-btn" id="time-btn">2018-2020</button>
                        <button class="time-btn" id="time-btn">2021-2023</button>
                    </div>
                    <div class="factory-store-card row">
                        <div class="factory-img col-6">
                            <img class="factory-img-style" src="images/traktor-test.jpg" alt="">
                        </div>
                        <div class="about-date col-6">
                            <h3 class="card-date">1931-1961</h3>
                            <p class="card-date-text">Тут текст, относящийся к конкретной дате</p>
                        </div>
                    </div>
                </div>


Ответы (1 шт):

Автор решения: Daniil

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

Чтобы все работало без перезагрузки, юзайте аякс

→ Ссылка