如何在不同的图像上切换两个表格使用html单击第一行 [英] how to switch two tables on different image click on first row using html
本文介绍了如何在不同的图像上切换两个表格使用html单击第一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须创建一个1页的html网站。我已经用法语进行了编写，现在我正在尝试在我的网站顶部添加一个选项，以在法语或英语之间翻译语言。
这个想法是有一张表，其中包含法国和英格兰（法语和英语）国旗的按钮在第一行（如下所示： http://prntscr.com/6yq4t2 ）现在在更改标志时，应该切换到另一个表，其内容是使用html单击的标志语言编写的，而现有表将会由被点击的国旗语言表代替（实际上有2个表格（一次一个），英文和法文内容必须打开点击第一行默认表上的标志 - 这是法语）。
在代码中查看此部分：
< h1 style =margin： 0; font-size：12px; color：＃33384f;>
语言翻译：
< img width =18height =10src =http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif alt =onclick =myFunctionFrench（）/>
< img width =18height =10src =http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb= 20100614220751alt =onclick =myFunctionEnglish（）/>
< / h1>
我的所有html都是这样的（它不包含英文表的代码，但它会有除了书面内容是英文的，并且在相应标志选择上的这两个表之间必须进行切换之外，该表格具有相同的html代码）：
<！DOCTYPE PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< meta content =text / html; charset = utf-8http-equiv =Content-Type/>
< title> Axestrack< / title>
<！ - 一般样式表 - >
< style type =text / css>
p {
padding：0;
保证金：0;
h1，h2，h3，h4，h5，p，li {
font-family：Helvetica，Arial，sans-serif;
}
td {
vertical-align：top;
}
ul，ol {
margin：0;
padding：0;
}
.tab {
margin-left：40px;
margin-right：40px;
}
< / style>
< / head>
< body>
< div id =img_home>< / div>
< table cellspacing =0border =0cellpadding =0width =100％align =centerstyle =margin：0px;>
< tbody>
< tr valign =top>
< td valign =top>
<！ - container - >
< tbody>
< tr>
< td valign =topborder =0style =border：none;>
< table cellspacing =0cellpadding =0border =0align =centerstyle =padding-bottom：13px;>
< tbody>
< tr>
< h1 style =margin：0; font-size：12px; color：＃33384f;>
语言翻译：
< img width =18height =10src =http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif alt =onclick =myFunctionFrench（）/>
< img width =18height =10src =http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb= 20100614220751alt =onclick =myFunctionEnglish（）/>
< / h1>
< td valign =topcolspan =2style =padding：inherit>< img width =650height =18src =http：//www.axestrack。 com / wp-content / uploads / header-top.jpgalt =/>< / td>
< / tr>
< tr>
< td valign =topwidth =511style =padding-top：19px; padding-left：21px;>
< h1 style =margin：0; font-size：12px; color：＃33384f;> Michel< / h1>
< h1 style =margin：0; font-size：12px; color：＃33384f;>Résidenceétudiante< / h1>
< / td>
< / tr>
< tr>< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< tr>
< td valign =topcolspan =2style =padding：inherit>< img width =650height =18src =http：//www.axestrack。 com / wp-content / uploads / header-top.jpgalt =/>< / td>
< / tr>
< tr>
< td valign =topwidth =511style =padding-top：4px; padding-bottom：5px; padding-left：21px;>
< h1 style =margin：0; font-size：12px; color：＃33384f;> Recherche d'emploi（développementC / C ++ / C＃/ Silverlight / Wpf / Asp.Net/ MVC- MVVM）< / h1>
< / td>
< / tr>
< tr>
< td valign =topcolspan =2style =padding：inherit>< img width =650height =18src =http：//www.axestrack。 com / wp-content / uploads / header-top.jpgalt =/>< / td>
< / tr>
<！ - - 地层 - >
< tr>
< td valign =topwidth =511style =padding-top：4px; padding-bottom：5px; padding-left：21px;>
< / td>
< / tr>
<！ - 巴黎 - >
< tr>
< td valign =topwidth =511style =padding-top：4px; padding-bottom：5px; padding-left：21px;>
< h1 style =margin：0; font-size：12px;> 2012-2014：< / h1>
< p class =tabstyle =margin-right：0; font-size：12px;>
Master enGénieinformatiqueàparis。 （Diplômed'ingénieur）
< / p>
< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
<！---->
< / tbody>
< / table>
< / tr>
< tr>
< td valign =topcolspan =2>< img width =599height =6src =http://www.axestrack.com/wp-content/uploads /double-spacer.jpgalt =/>< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< / tbody>
< / table>
<！ - - faltu kaam here - >
< script>
function myFunctionFrench（）{
document.getElementsByTagName（BODY）[0] .style.backgroundColor =yellow;
}
function myFunctionEnglish（）{
document.getElementsByTagName（BODY）[0] .style.backgroundColor =green;
}
< / script>
< / body>
< / html>
如何在包含第一行语言标志的标志点击上实现这两个表的切换。任何想法 ？ （请把我的html代码作为参考来回答我的问题）。
有人可以帮我做这件事吗？
解决方案
用这两种语言编写所有div（并在其上放置类，例如： .french ），然后使用 jQuery 如下：
$（document）.ready（function （）{
$（＃frenchFlag）。click（function（）{//当你点击法国国旗
$（.french）。show（）; //显示（）;
$（。english）。hide（）; //使用class .english
}）;
$（＃englishFlag）隐藏div （）; $ b $（。english）。show（）;
}）;
}）;
很明显，您会隐藏类 .french 或者带有 .english 的div在你的页面加载开始时（基本上在你的
$（document）.ready（function（）{
//写在这里，例如，如果您的网站默认为法文：
$（。法国）。show（）;
$（。english）。hide（）
}）;
I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
解决方案
Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});
这篇关于如何在不同的图像上切换两个表格使用html单击第一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
