使用jquery - 语言选择器更改多个div的显示样式

Question

编辑所以我已经解决了它 - 如果有人通过搜索找到它，供将来参考：我给了我想在页面加载时隐藏的每种语言的父级 div ('divGer' + 'divFre') 'style="display:none;"' - 然后当 selecting 每个语言 link javascript 显示那些 divs.

再次感谢您的帮助！

已更新

嗨，

所以，经过一些摆弄和更多的谷歌搜索，我设法让它工作了。每种语言的 2 divs，我包裹在一个父 div 中。和下面的 Javascript 有效 - 但是当你第一次加载页面时它显示所有语言，然后显示 1 种语言取决于你在顶部 select 的语言。

HTML:

<a class="showSingle" target="Eng">English</a>
<a class="showSingle" target="Ger">Deutsch</a>
<a class="showSingle" target="Fre">Français</a>


<div id="divEng" class="targetDiv">
     <div id="text-top" class="english top">
         <p class="top">ENGLISH TEXT FOR TOP</p>
     </div>
     <div id="text-bot" class="english bot">
         <p class="bot">english text for bot</p>
     </div>
</div>

<div id="divGer" class="targetDiv">
     <div id="text-top" class="deutsch top">
         <p class="top">deutsch text for top</p>
     </div>
     <div id="text-bot" class="deutsch bot">
         <p class="bot">deutsch text for bot</p>
     </div>
</div>


<div id="divFre" class="targetDiv">
     <div id="text-top" class="francais top">
         <p class="top">francais text for top</p>
     </div>
     <div id="text-bot" class="francais bot">
         <p class="bot">francais text for bot</p>
     </div>
</div>

JS:

jQuery(function(){
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
});

jsfiddle 在这里：

注意 - 我试着让它工作，但我感觉它没有，因为 'a' 标签没有 'href' JSFIDDLE

请告诉我是否有清理代码的地方，同时还设置 'divEng' 在页面加载时默认显示。

Answer 1

这是您隐藏和显示语言的开始。您只需要对其应用所需的 CSS。

$('a').click(function() {
  var lang = "." + $(this).attr('data-lang');
  $('.language').hide();
  $(lang).show(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="text-top-en" class="english language">
<p class="top">text above buttons english</p>
</div>
<a href="#" data-lang="english">English</a>
<div id="text-bot-en" class="english language">
<p class="bot">text below buttons english</p>
</div>

<div id="text-top-de" class="deutsch language" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>
<a href="#" data-lang="deutsch">Deutsch</a>
<div id="text-bot-de" class="deutsch language" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>

<div id="text-top-de" class="french language" style="display: none;">
<p class="top">text above buttons in Français</p>
</div>
<a href="#" data-lang="french">Français</a>
<div id="text-bot-de" class="french language" style="display: none;">
<p class="bot">text below buttons in Français</p>
</div>

<div id="text-top-de" class="italian language" style="display: none;">
<p class="top">text above buttons in Italian</p>
</div>
<a href="#" data-lang="italian">Italiano</a>
<div id="text-bot-de" class="italian language" style="display: none;">
<p class="bot">text below buttons in Italian</p>
</div>

<div id="text-top-de" class="spanish language" style="display: none;">
<p class="top">text above buttons in spanish</p>
</div>
<a href="#" data-lang="spanish">Español</a>
<div id="text-bot-de" class="spanish language" style="display: none;">
<p class="bot">text below buttons in spanish</p>
</div>


<div id="text-top-de" class="dutch language" style="display: none;">
<p class="top">text above buttons in dutch</p>
</div>
<a href="#" data-lang="dutch">Nederlands</a>
<div id="text-bot-de" class="dutch language" style="display: none;">
<p class="bot">text below buttons in dutch</p>
</div>

Answer 2

向元素添加更多类，以便更容易定位。
然后将语言添加到没有特殊字符的锚点。

在点击处理程序中，很容易获取语言，隐藏所有然后显示所选

$('.lang_selection').on('click', function() {
 $('.lang').hide();
    $('.' + $(this).data('lang')).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text-top-en" class="english lang">
<p class="top">text above buttons</p>
</div>

<div id="text-bot-en" class="english lang">
<p class="bot">text below buttons</p>
</div>

<div id="text-top-de" class="deutsch lang" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>

<div id="text-bot-de" class="deutsch lang" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>

<div id="text-top-de" class="francais lang" style="display: none;">
<p class="top">text above buttons in french</p>
</div>

<div id="text-bot-de" class="francais lang" style="display: none;">
<p class="bot">text below buttons in french</p>
</div>

<a href="#" class="lang_selection" data-lang="english">English</a>
<a href="#" class="lang_selection" data-lang="deutsch">Deutsch</a>
<a href="#" class="lang_selection" data-lang="francais">Français</a>

Answer 3

以下是我的做法：https://jsfiddle.net/phfva4hk/1/

<a href="#" data-language="english" class="the_language_selector">English</a>
<a href="#" data-language="deutsch" class="the_language_selector">Deutsch</a>
<br /><br />
<div id="text-top-en" class="english lang_based">
<p class="top">text above buttons</p>
</div>

<div id="text-bot-en" class="english lang_based">
<p class="bot">text below buttons</p>
</div>

<div id="text-top-de" class="deutsch lang_based" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>

<div id="text-bot-de" class="deutsch lang_based" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>

在 JS 方面：

$(".the_language_selector").click(
    function () {
    var the_language_class = $(this).attr("data-language");
    $(".lang_based").hide("slow");
    $("." + the_language_class).show("slow");
  }
);

想法是使用 "data" 标签来存储要显示和隐藏的 div class。为了清除之前的选择，在每种语言 link 单击时，我还隐藏了所有具有 class "lang_based" 的 div（也就是说，根据语言显示或隐藏）

Answer 4

我希望这对你有用

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<div id="languages">
<div id="text-top-en" class="english">
<p class="top">text above buttons</p>
</div>

<div id="text-bot-en" class="english">
<p class="bot">text below buttons</p>
</div>

<div id="text-top-de" class="deutsch" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>

<div id="text-bot-de" class="deutsch" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>
</div>

<a href="#">English</a>
<a href="#">Deutsch</a>
<a href="#">Français</a>
<a href="#">Italiano</a>
<a href="#">Español</a>
<a href="#">Nederlands</a>

js脚本端

  <script>
    $(function(){
      $('a').on('click',function() {
        var lang =$(this).text();
        $('#languages').children('div').each(function(){
          if($(this).is('.'+lang) ) {
            $(this).show();
          } else {
            $(this).hide();
          }
        });
      });
    });
  </script>

Answer 5

您可以简单地使用来自 jquery 的点击事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>
      <a id="en" href="#">English</a>
      <a id="de" href="#">Deutsch</a>
      <a href="#">Français</a>
      <a href="#">Italiano</a>
      <a href="#">Español</a>
      <a href="#">Nederlands</a>
      <div id="text-top-en" class="english">
        <p class="top">text above buttons</p>
      </div>

      <div id="text-bot-en" class="english">
        <p class="bot">text below buttons</p>
      </div>

      <div id="text-top-de" class="deutsch" style="display: none;">
        <p class="top">text above buttons in deutsch</p>
      </div>

      <div id="text-bot-de" class="deutsch" style="display: none;">
        <p class="bot">text below buttons in deutsch</p>
      </div>
      <script src="jquery.js"></script>
      <script>
        //Event handler on deutsch click
        $("#de").click(function(){
          $(".english").hide();    
          $(".deutsch").show();
        });
        $("#en").click(function(){
          $(".english").show();    
          $(".deutsch").hide();
        });
      </script>
    </body>
</html>

使用jquery - 语言选择器更改多个div的显示样式

Change the display style of multiple divs using jquery - language selector

html

javascript

jquery

display