Как я могу отобразить определенные c тексты внутри div одним нажатием кнопки?

Question

У меня небольшой текст переведен на 3 языка. Я хочу показать первый текст на английском языке sh, а над текстом показать две кнопки, одна на французском, а другая на итальянском. И я хочу, чтобы после того, как вы нажали на французский, текст отображался на французском, то же самое и на итальянском. Это означает, что у меня будет три отдельных блока: один для английского sh, один для французского и один для итальянского. Я хочу показать на странице только один из них, в зависимости от того, какую кнопку я нажимаю. Как я могу это сделать? Спасибо

Answer 1

Все, что вам нужно сделать, это создать связь между кнопкой и желаемым div, а затем отображать связанный div только по щелчку и скрыть другие, в моем коде вы можете увеличивать и уменьшать div, не нужно прикасаться к * Код 1009 * или CSS, просто добавьте или удалите div из HTML

$(document).ready(function(){
        $('.btnWrapper button').click(function(){
            $('.btnWrapper button').removeClass('active');
            $(this).addClass('active');
            var realtion = $(this).data('relation');
            $('.translatedText>div').removeClass('active');
            $('.translatedText').find('#' + realtion).addClass('active');
        });
        
    });

 .btnWrapper button.active {
            background-color: red;
            color: #fff;
        }
        .translatedText > div {
            display: none;
        }
        .translatedText > div.active {
            display: block;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnWrapper">
        <button class="active" data-relation="eng">English</button>
        <button data-relation="fre">French</button>
        <button data-relation="ita">Italian</button>
    </div>
    <div class="translatedText">
        <div id="eng" class="active">
            I am English's Div
        </div>
        <div id="fre">
            I am French's Div
        </div>
        <div id="ita">
            I am Italian's Div
        </div>
    </div>

Answer 2

    document.querySelector(".btn-eng").addEventListener('click', function () {
        document.querySelector(".eng").classList.add("active");
        document.querySelector(".french").classList.remove("active");
        document.querySelector(".italian").classList.remove("active");
    });
    document.querySelector(".btn-french").addEventListener('click', function () {
        document.querySelector(".french").classList.add("active");
        document.querySelector(".eng").classList.remove("active");
        document.querySelector(".italian").classList.remove("active");
    });
    document.querySelector(".btn-italian").addEventListener('click', function () {
        document.querySelector(".italian").classList.add("active");
        document.querySelector(".eng").classList.remove("active");
        document.querySelector(".french").classList.remove("active");
    });

*{
    font-size: 1rem;
 }
 .container {
              margin: auto;
              height: 100px;
              width: 250px;
 }
 .flex {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         height: 100%;
         width: 100%;
 }
 .eng,
 .french,
 .italian {
            display: none;
 }
 .active {
           display: block;
 }

<div class="container">
        <div class="flex">
            <div class="section">
                <p class="eng active">Hello Developers out there!</p>
                <p class="french">Bonjour les développeurs là-bas!</p>
                <p class="italian">Ciao sviluppatori là fuori!</p>
            </div>
            <div class="button">
                <button class="btn-eng">English</button>
                <button class="btn-french">French</button>
                <button class="btn-italian">Italian</button>
            </div>
        </div>
</div>

Answer 3

$(function() {
  $('[data-lang="en"]').addClass('active');
  $('.flag').on('click', function() {
    $('[data-lang]').removeClass('active');
    $('[data-lang="' + $(this).data('lang') + '"]').addClass('active');
  });
});

.flag.active {
  background-color: yellow;
}

.text {
  display: none;
}

.text.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-lang="en" class="flag">English</button>
<button data-lang="fr" class="flag">Français</button>
<button data-lang="it" class="flag">Italiano</button>
<div data-lang="en" class="text">My text in English</div>
<div data-lang="fr" class="text">Mon texte en français</div>
<div data-lang="it" class="text">Il mio testo in italiano</div>