按一下按钮即可切换多个Div名称/内容 [英] Toggle multiple Div names/content by one button click

问题描述

我有4个不同的德语。通过点击一个按钮，我想隐藏德国的div，而不是显示英语的divs，这是之前隐藏的。

i have 4 different divs in german. By clicking a button, i want to hide the german divs and instead show the english divs, which are hidden before.

有两种方法可以在两个div之间切换，但是如何通过在一个按钮上点击一次来同时更改多个div？

There are ways to change between 2 divs, but how can i change mulitple divs at the same time by clicking one time on one button?

推荐答案

您需要JavaScript

或更容易的方法使用JavaScript库（如jQuery）。

You'll need JavaScript
or for an easier approach a JavaScript library like jQuery.

基本方法是将data- *属性和类添加到您的元素：

The basic approach is to add data-* attributes and classes to your elements:

<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看起来像：

than your jQuery might look like:

$(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示例您可以使用甚至下载

Here's a live jsBin example you can play with or even download

这篇关于按一下按钮即可切换多个Div名称/内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！