如何在兩個表之間切換
[英]how to switch between two tables
問題描述
我創建了一個 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 個表的切換。 任何的想法 ？ （請以我的 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>
輸出為： http : //prntscr.com/6zdj0r
1 個解決方案
解決方案1
0 2020-05-26 22:23:10
您可以設置一個隱藏可見性的表，另一個可見的表，然后當按下按鈕時，您只需在 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>
如何使jQuery DataTables在多個DOM表之間切換？
[英]How to get jQuery DataTables to switch between multiple DOM tables?
如何使用JavaScript使用一個按鈕在兩種不同的顏色之間切換
[英]How to switch between two different colors with one button using javascript
如何在儀表板中添加按鈕以在兩種類型的谷歌圖表之間切換
[英]how to add buttons to switch between two types of google charts in a dashboard
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.