我创建了一个HTML页面。我现在只用法语做了这个，我试图在我的网站顶部添加一个选项来翻译法语和英语之间的语言（下面的链接中有2个语言标记）。
我的想法是在第一行有一个包含法国和英国国旗（法语和英语）的按钮的表格（如下所示：http://prntscr.com/6yq4t2）现在改变标志应切换到另一个表格内容是用使用HTML点击的标志语言编写的，现有的表格将被点击的标记语言表替换（实际上有2个表格（一次显示一个），具有英语和法语内容，必须打开点击默认表的第一行上的标志 - 这是法语。）
在代码中查看此部分：
<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>
下面我有我的HTML代码（它不包含英文表的代码，但假设该表具有相同的HTML代码，除了书面内容是英文的，并且必须在这两个之间进行切换相应标志选择上的表格：
<!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>
如何在标记点击上实现2个表的切换，其中包含第一行中的language-flag。任何的想法 ？ （请以我的HTML代码作为参考来回答我的问题）。
有人可以帮我这样做吗？
在Wrick7建议之后
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
您可以将一个表的可见性设置为隐藏，而将另一个表的可见性设置为可见，然后在按下按钮时，只需在js中对其进行更改即可。
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>