將兩個不同的文本放在HTML頁面的同一個地方

Question

我想在HTML頁面上用法語寫一個文本，並在同一個地方用英文隱藏翻譯。單擊JavaScript按鈕將顯示英文文本而不是法文文本，方法是更改​​包含文本的每個標記的Visibility屬性。

也許這不是做這種事情的最好方法，但我必須這樣做。

我試過以下的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> 

但它不工作：以英文文本低於法國之一，我想不通爲什麼。

Answer 1

你可以做這樣的事情，只需扳動能見度：

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>

你也可以檢查，如果你希望能夠回到法國的哪一個是第一個主動。

Answer 2

你不應該把翻譯隱藏在任何其他元素後面。你應該從某個地方抓住它並設置innerHTMLValue值。

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

} 

然後，你可以簡單地通過語言。您應該將語言庫構建爲一個Javascript對象，因爲這實際上是基於面向對象設計的最佳方式，並且未來的請求可能需要此解決方案。

Answer 3

如果文本應該位於相同的確切位置，請使用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它從佈局中移除渲染以及元素。