一键切换多个 Div 名称/内容答案

【问题标题】：Toggle multiple Div names/content by one button click一键切换多个 Div 名称/内容
【发布时间】：2015-03-09 16:15:14
【问题描述】：

我有 4 个不同的德语 div。通过单击一个按钮，我想隐藏德语 div，而是显示以前隐藏的英语 div。

有很多方法可以在 2 个 div 之间进行更改，但是如何通过单击一个按钮来同时更改多个 div？

【问题讨论】：

标签： html button click toggle

【解决方案1】：

你需要 JavaScript
或者更简单的方法是使用 jQuery 等 JavaScript 库。

基本的方法是给你的元素添加 data-* 属性和类：

<button class="langButton" data-language="en">EN ARTICLES</button>
<button class="langButton" data-language="de">DE ARTICLES</button>
<button class="langButton" data-language="it">IT ARTICLES</button>

<div class="article en">En 1...</div>
<div class="article en">En 2...</div>
<div class="article de">De 1...</div>
<div class="article de">De 2...</div>
<div class="article it">It 1...</div>
<div class="article it">It 2...</div>

你的 jQuery 可能看起来像这样：

$(function() {   // Document is now ready to be manipulated

   // Cache all .article elements
   var $articles = $('.article');

   $(".langButton").click(function(){
       // Get the "en", "de" or "it" value
       var language = $(this).attr("data-language");
       // Hide all articles
       $articles.hide();
       // Show only the ones that have the ."language" related class
       $("."+ language ).show();
   });

});

这是一个live jsBin example，你可以玩，甚至下载

【讨论】：

这正是我所需要的。非常非常感谢！

【解决方案2】：

你是否被限制不能使用像 jQuery 这样的框架？ jQuery 提供了多种方法来在多个选定元素上运行代码。

这是一个纯 javascript 的基本工作解决方案：

var shown = 'english';

function swap() {
    if (shown === 'english') {
       document.getElementById('german-1').style.display = "inline-block";
       document.getElementById('german-2').style.display = "inline-block";
       document.getElementById('german-3').style.display = "inline-block";
       document.getElementById('english-1').style.display = "none";
       document.getElementById('english-2').style.display = "none";
       document.getElementById('english-3').style.display = "none";
       shown = 'german';
   } else {
       document.getElementById('english-1').style.display = "inline-block";
       document.getElementById('english-2').style.display = "inline-block";
       document.getElementById('english-3').style.display = "inline-block";
       document.getElementById('german-1').style.display = "none";
       document.getElementById('german-2').style.display = "none";
       document.getElementById('german-3').style.display = "none";
       shown = 'english';
   }
};

jsfiddle 的链接： https://jsfiddle.net/v2k3rzge/

希望对你有帮助

【讨论】：

这很有帮助！非常好的和可理解的功能！谢谢你一千次pan>