我想将以法语编写的文本放在HTML页面上,并将他隐藏的英语翻译放在同一位置。 通过更改包含每个标记的Visibility属性,单击JavaScript按钮将显示英文文本而不是法语文本。

也许这不是执行此类操作的最佳方法,但我必须这样做。

我已经尝试了以下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>

但这是行不通的:英文文本低于法语文本,我不知道为什么。

#1楼 票数:0

您不应将“隐藏”翻译放在任何其他元素之后。 您应该从某个地方获取它,然后设置innerHTMLValue值。

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

}

然后,您只需传递语言即可。 您应该将语言库构造为Javascript对象,因为这实际上是基于面向对象设计的最佳方法,将来可能会要求使用此解决方案。

#2楼 票数:0

如果文本应该在相同的确切位置,请使用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 ,它也可以从布局渲染中删除元素。

#3楼 票数:0 已采纳

您可以执行以下操作,只需翻转可见性即可:

 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> 

如果您希望能够使用法语,也可以先检查哪个处于活动状态。

  ask by Adrien Budet translate from so

未解决问题?本站智能推荐:

2回复

同一位置的两个div

我有两个div。 第二个div应该在第一个div上,所以...当点击第一个div中的菜单按钮时,第一个div上应该出现第二个div(第二个div覆盖第一个div)。 我在第一个div下创建了第二个div,给了它相对位置,并把它拿到了第一个div。 但有一个问题。 有一个溢出,导致div很
6回复

Html 段落如何将文本居中对齐并在同一位置或位置开始所有文本行?

<p style="text-align: center;"> Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown
2回复

两个元素绝对定位在同一位置但不在同一位置显示

所以我有这两件事。 一个是透明按钮,另一个是其背后的图像。 我这样做是因为添加背景不起作用。 这是我尝试过的: 我做了所有我能想到的微小变化,所以因为我的截止日期很快就到了,所以我说去他妈的,然后在按钮后面放了一张图片。 工作完美。 HTML: 他们应该在同一个地方,但是当我在 Ch
1回复

如何将2个div放在同一位置?

我有一个滑块,并且有一个视频,我想将图片和视频放在一个地方,然后写入display:none如果设备的宽度超过600 display:none ,则无视频 有一个html代码: 和CSS:
2回复

将DIV放在同一位置,切换它们

我的几个DIV有点问题。 我需要将两个DIV放在完全相同的位置,然后切换它们。 随着一个div消失,另一个应该出现。 我将使用jQuery toggle()做到这一点。 问题在于两个DIV应该是页面流的一部分,并且位置应完全相同。 我将如何实现? 因此,有一些以前的div
2回复

如何在页面的其余部分滚动时保持div卡在同一位置?

例如: http : //www.ehow.com/how_2196172_ping-mac-computer.html 你可以看到“有用吗?” 即使滚动页面的其余部分,元素也会卡在原位。 我不确定这是否只能用css或需要js(最好是jQuery)来完成。 如何才能做到这一点?
2回复

缩小窗口大小时,HTML文本位置不在同一位置

当我缩小浏览器的窗口时,文本聚集在一起,并且全部弄乱了。 有什么我可以用来防止这种情况发生的代码吗?无论窗口大小如何,我都希望它们保持在自己的位置。 .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); p
2回复

为什么这两个跨度不会在同一位置垂直对齐?

我是一个新手,我今天尝试使用img和ap元素制作一个带有2个跨度的div。 好吧,这是下面的相关代码,但是两个跨度保持在diff垂直位置。我不知道为什么,因为它们都具有相同的css,并且包装器的宽度足够长。 并且,css是 最后,我给第二个跨度一个浮动右css来解决这个问题,肯