如何在两张表之间切换

问题描述 投票：0回答：1

我已经创建了一个HTML页面。我只用法语做了一个网页，现在我想在我的网站顶部添加一个选项来翻译法语和英语之间的语言（在下面一段的链接中有两个语言标志）。

我的想法是有一个表格，其中包含一个法国和英国国旗（法语和英语）的按钮，在第一行（类似于这样。http:/prntscr.com6yq4t2 )现在改变标志时，应该切换到另一个表格，该表格的内容是用HTML点击的标志语言写的，现有的表格将被点击的标志语言的表格所取代(实际上有两个表格(一次显示一个)，有英语和法语内容，点击标志时必须切换到默认表格的第一行--法语)。

请看这部分代码。

<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.com6zdj0r。

javascript jquery html
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.