Question

修改所以我已经解决了 - 如果有人通过搜索找到这个，以供将来参考：我给每个语言的父div（'divGer'+'divFre'）我想隐藏在页面上加载'style =“display：none;”' - 然后当选择每个语言链接时，javascript显示了这些div。

再次感谢您的帮助！

已更新

您好，

所以，经过一些摆弄和更多的谷歌搜索，我设法让它工作。我为每种语言都有两个div，我把它包装成一个父div。以下Javascript有效 - 但是当您第一次加载页面时，它会显示所有语言，然后显示1种语言，具体取决于您在顶部选择的语言。

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

为元素添加更多类，以便更容易定位然后将语言添加到锚点而不使用特殊字符。

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

$('.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 2

这是一个隐藏和显示语言的开始。您只需将所需的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 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类和要隐藏的div。只是为了以前的选择被删除，在每个语言链接点击，我也隐藏所有具有类“lang_based”的div（也就是说根据语言显示或隐藏的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 side

  <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中的click事件：

＆＃13;

<!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>

＆＃13;

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

5 个答案: