如何通過單擊按鈕在 div 中顯示特定文本？

Question

我有一個小文本翻譯成 3 種語言。 我希望以英語顯示第一個文本，並在文本上方顯示兩個按鈕，一個說法語，一個說意大利語。 我希望一旦您單擊法語，以法語顯示文本，與意大利語相同。 這意味着我將擁有三個獨立的 div，一個用於英語，一個用於法語，一個用於意大利語。 我只想在頁面上顯示其中一個，具體取決於我單擊的按鈕。 我怎樣才能做到這一點？ 謝謝

Answer 1

您需要做的就是在按鈕和您想要的 div 之間創建關系，然后僅在單擊時顯示相關 div 並隱藏其他 div，在我的代碼中您可以增加和減少 div，無需觸摸 jQuery 或 CSS 代碼，只需從 HTML 添加或刪除 div

 $(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

 $(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>

Answer 3

 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>