将两个不同的文本放在HTML页面的同一个地方

我想在HTML页面上用法语写一个文本，并在同一个地方用英文隐藏翻译。单击JavaScript按钮将显示英文文本而不是法文文本，方法是更改包含文本的每个标记的Visibility属性。将两个不同的文本放在HTML页面的同一个地方

也许这不是做这种事情的最好方法，但我必须这样做。

我试过以下的HTML和CSS代码：

.presentationField { 
    vertical-align: text-top; 
    margin-left: auto; 
    margin-right: auto; 
    width: 500px; 
    border: 2px dashed blue; 
} 

<div id="frenchField" class="presentationField"> 
      <h1>Les villes du Québec</h1> 

      <form> 
      Veuillez saisir le nom d'une ville au Québec<br> 
       <input type="text" id="recherche"> 
      </form> 
     </div> 
     <div id="englishField" class="presentationField"> 
      <h1>Cities of Québec</h1> 

      <form> 
      Please type the name of a town located in the province of Québec<br> 
       <input type="text" id="recherche"> 
      </form> 
     </div>

但它不工作：以英文文本低于法国之一，我想不通为什么。

来源

2015-03-30 Adrien Budet

你能发布一些你的javascript代码吗？ – Khalid 2015-03-30 21:44:02

你可以做这样的事情，只需扳动能见度：

function change() { 
 
    document.getElementById('frenchField').style.display = 'none'; 
 
    document.getElementById('englishField').style.display = 'block'; 
 
}

.presentationField { 
 
    vertical-align: text-top; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 500px; 
 
    border: 2px dashed blue; 
 
} 
 
#englishField {display: none;} 
 
button {margin: auto; width: 200px; display: block}

<div id="frenchField" class="presentationField"> 
 
    <h1>Les villes du Québec</h1> 
 

 
    <form> 
 
    Veuillez saisir le nom d'une ville au Québec 
 
    <br> 
 
    <input type="text" id="recherche"> 
 
    </form> 
 
</div> 
 
<div id="englishField" class="presentationField"> 
 
    <h1>Cities of Québec</h1> 
 
    <form> 
 
    Please type the name of a town located in the province of Québec 
 
    <br> 
 
    <input type="text" id="recherche"> 
 
    </form> 
 
</div> 
 
<button onclick="change()"> FR -> EN </button>

你也可以检查，如果你希望能够回到法国的哪一个是第一个主动。

来源

2015-03-30 21:44:21 Shomz

你不应该把翻译隐藏在任何其他元素后面。你应该从某个地方抓住它并设置innerHTMLValue值。

function Translate(Language) 
{ 
    if(Language=='English') 
    { 
     document.getElementById("myBox").innerHTML = "Hi"; 
    } 
    else 
    { 
     document.getElementById("myBox").innerHTML = "Hola"; 
    } 

}

然后，你可以简单地通过语言。您应该将语言库构建为一个Javascript对象，因为这实际上是基于面向对象设计的最佳方式，并且未来的请求可能需要此解决方案。

来源

2015-03-30 21:43:35 Hozikimaru

如果文本应该位于相同的确切位置，请使用CSS position属性重叠它们。根据您想要的结果，您可能还必须使用z-index属性。

例子：

p{ color:red; font-size:200%; } 
 
#alt{ color:blue; position:relative; top:-70px; }

<p>Regular Word</p> 
 
<p id ="alt">French Word</p>

或者你可以使用display:none代替visibility:hidden它从布局中移除渲染以及元素。

来源

2015-03-30 21:43:51

将两个不同的文本放在HTML页面的同一个地方

回答

相关问题