Question

我使用html和javascript制作了我自己的简历，我希望用我的语言选择两种语言来改变语言（我选择html-Java脚本，因为我是初学者，所以它会很好。）

我在div和＃34; eng-tab＆＃34;中有两个用于英语和法语CV的表格。和＆＃34; frc-tab＆＃34;分别

我想要的是：在运行时，我的代码必须显示默认为英语简历，而还包含两个法语和英语语言翻译按钮，这样当用户希望将其翻译为法语时，他将点击法语按钮，它将替换英语简历由法语版的CV（由div包含＆＃34; frc-tab＆＃34;）放在同一个地方。

我的代码中有什么问题？

（1。）问题是，当我运行我的代码时，它显示默认的CV没有任何问题但是当我点击任何按钮来更改翻译时它没有显示任何CV。我不知道为什么？解决这个问题的方法是什么？

Answer 1

你的代码有divs错误..divs没有正确关闭，你还必须在你的代码http://code.jquery.com/jquery-1.8.3.js中导入jquery插件

以下是更新的fidle Updated fiddle

JS：

$(function () {
$(".frc-tab").hide();
$(".eng-tab").show();


 $('.eng').on('click', function (event) {
     $('.eng-tab').show();
     $('.frc-tab').hide();

 });

 $('.frc').on('click', function (event) {
     $('.eng-tab').hide();
     $('.frc-tab').show();

 });

})();

HTML：

<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<!-- here is english translation-->
<div class="eng-tab">
<table class="table table-bordered" 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>
                                            <td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Shekhar Singh SHEKHAWAT</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Studnet residence</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Tel : 06.52.53.46.69</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Email : shekhar.paris@gmail.com</h1>

                                            </td>
                                            <td valign="middle" width="88" style="
                                                    padding-right:22px; padding-top:20px;">
                                                <img width="118" height="80" src="http://perso.esiee.fr/~georgesj/esiee/pic/esiee_paris_logo.gif" alt="">
                                            </td>
                                            <tr></tr>
                                        </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;">In search of job(Software development using 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>
                                        <!-- BKBIET -->
                                        <tr>
                                            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                                                 <h1 style="margin: 0; font-size: 12px;">2008-2012 :</h1>

                                                <p class="tab" style="margin-right:0;font-size: 12px;">Bachelors in computer science in engineering from B.K. Birla Institute of Engineering and technology-Pilani (India).</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </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:red;">Professional  Experience(21 months total): </h1>

                            </td>
                        </tr>
                        <!-- Axestrack -->
                        <tr>
                            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                                 <h1 style="margin: 0; font-size: 12px;">2015:January-June (6 months internship) : </h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;"> <a href="http://www.axestrack.com/">Axestrack</a> is originated by IIT-Bombay and BITS-Pilani and IIM educated good experienced engineers in reputed MNCs like Microsoft. The company developed a software which tracks the location, speed, direction, fuel management, stoppage time, route deviation, door lock, car lock etc. of vehicle and notify the Fleet Manager through Sms or email. My task is "Multiple Responsive UI Integration with Tracking Services" in this existing software. Technologies used are : C#(MVC-5),Asp.net, javascript, html5, css, SqlServer, MongoDB, Perl, SCRUM.</p>
                            </td>
                        </tr>
                        <!-- MIPS Laboratory -->
                        <tr>
                            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                                 <h1 style="margin: 0; font-size: 12px;">2011 : January-February (2 months) :</h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;">In <a href="http://www.mips.uha.fr/anglais/">MPS-Laboratory</a> was working on a AutoMotive application using Visual C++ and RTMAaps. Objective was to determine the appropriate speed of the car according to the current road context (using camera and sensors in RTMaps) under a real time software called RTMaps using Visual C++ . Necessary tools were developed for 2 level data fusion of information provided by several specialized sources using the concept of the belief theory.</p>
                            </td>
                        </tr>
                        <!-- Langues/Informatiques -->
                        <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>
                        <!-- Language -->
                        <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;">Language: </h1>

                            </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;">French :</h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;">DELF-B2 certified in French language by ministry of education of France(<a href="http://en.wikipedia.org/wiki/Dipl%C3%B4me_d'%C3%A9tudes_en_langue_fran%C3%A7aise">DELF</a>- Diplôme d'études en langue française)</p>
                            </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;">English :</h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;">Very Good</p>
                            </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;">Hindi :</h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;">Very Good</p>
                            </td>
                        </tr>
                        <!-- Informatique -->
                        <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;">Informatique: </h1>

                            </td>
                        </tr>
                        <!-- Centres d’intérêts -->
                        <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:red;">Centres d’intérêts: </h1>

                            </td>
                        </tr>
                        <!-- Centres d’intérêts details -->
                        <tr>
                            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                                <p class="tab" style="margin-right:0;font-size: 12px;">Voyages découvertes, lecture, internet, cuisine, cricket, culture, langue.</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
<!-- here is english translation ends-->
<!---->
<div class="frc-tab">
<table class="table table-bordered" 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>
                                            <td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Shekhar Singh SHEKHAWAT</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;"> 4 Allée Buissonnière, 77186 Noisiel</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Tél : 06.52.53.46.69</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Email : shekhar.paris@gmail.com</h1>

                                                 <h1 style="margin: 0; font-size: 12px; color:#33384f;">Nationalité : Indien</h1>

                                            </td>
                                            <td valign="middle" width="88" style="
                                                    padding-right:22px; padding-top:20px;">
                                                <img width="118" height="80" src="http://perso.esiee.fr/~georgesj/esiee/pic/esiee_paris_logo.gif" alt="">
                                            </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>
                        <!-- BKBIET -->
                        <tr>
                            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                                 <h1 style="margin: 0; font-size: 12px;">2008-2012 :</h1>

                                <p class="tab" style="margin-right:0;font-size: 12px;">Baccalauréat technologique en informatique à Birla Institute of Engineering and Technology en Inde.</p>
                            </td>
                        </tr>
                        <!-- ESIEE-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 à ESIEE Paris. (Diplôme d'ingénieur)</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </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:red;">Experience Professionnel (21 mois total): </h1>

            </td>
        </tr>
        <!-- Axestrack -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2015:Janvier-Juin (6 mois stage) : </h1>

                <p class="tab" style="margin-right:0;font-size: 12px;"> <a href="http://www.axestrack.com/">Axestrack</a> fournit la solution pour le suivi du véhicule. Nous avons développé un logiciel qui permet de suivre la Localisation du véhicule, la vitesse, la direction, la gestion du carburant, temps d'arrêt, la déviation de la route,verrouillage de porte, verrouillage de voiture, etc. de véhicule et Informer le gestionnaire de la flotte par SMS ou e-mail. Technologie utilisié sont C#(MVC-5),Asp.net, javascript, html5, css, SqlServer, MongoDB, Perl, SCRUM</p>
            </td>
        </tr>
        <!-- Lusis -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2014:Avril-Octobre (6 mois stage) : </h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Stage chez Lusis-Paris pour le développement d’un logiciel dans le cadre d’une croissance dans le domaine de la finance nous faisons développement sliverlight pour le développement d'une nouvelle application de pricing permettant de fournir des prix personnalisés pour nos clients. Ce système doit permettre de paramétrer les différentes composantes du flux de prix (spread, skew, band volume, bid dans toutes les dimensions du flux de prix c#-silverlight). (Équipe de 3 personnes)</p>
            </td>
        </tr>
        <!-- ESIEE-Paris -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2014 : Février- Avril (3 mois de stage):</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Stage à ESIEE-Paris pour le développement de optimale Binary File Compresser utilisant c/c++/c# (console application) et c#-silverlight (web application), Utilisé advance datastructure).</p>
            </td>
        </tr>
        <!-- LMS Siemens -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2013 : Mai- Août (4 mois de stage) : </h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Stage chez Siemens (LMS – Division à Roanne) pour le développement de logiciel AMESim en LMS à l’aide du c++ (Intégré AMESim avec Microsoft Windows API).</p>
            </td>
        </tr>
        <!-- MIPS Laboratory -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2011 : Janvier-Février (2 mois de stage) :</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Stage chez MIPS laboratoire à ENSISA Mulhouse pour travaille sur RTMaps en c++. Le projet était de trouver la bonne vitesse de voiture utilisant les Caméras et des Capteurs virtuelle (RTMaps) selon le contexte routier actuel.</p>
            </td>
        </tr>
        <!-- Langues/Informatiques -->
        <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>
        <!-- Language -->
        <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;">Language: </h1>

            </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;">Français :</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Intermédiaire (Presque niveau B2 de DELF- Diplôme d'études en langue française)</p>
            </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;">Anglais :</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Très bonne maitrise</p>
            </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;">Hindi :</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">Très bonne maitrise</p>
            </td>
        </tr>
        <!-- Informatique -->
        <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;">Informatique: </h1>

            </td>
        </tr>
        <!-- MIPS Laboratory -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                 <h1 style="margin: 0; font-size: 12px;">2011 : Janvier-Février (2 mois de stage) :</h1>

                <p class="tab" style="margin-right:0;font-size: 12px;">C, C++, C#, Java, Xml, Xaml, Html,css, javascript, Silverlight, .net , Asp.net, Uml, OpenGL, OpenCV, RTMAps,Visual Studio, Ubantu/Linux , Microsoft Windows.</p>
            </td>
        </tr>
        <!-- Centres d’intérêts -->
        <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:red;">Centres d’intérêts: </h1>

            </td>
        </tr>
        <!-- Centres d’intérêts details -->
        <tr>
            <td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
                <p class="tab" style="margin-right:0;font-size: 12px;">Voyages découvertes, lecture, internet, cuisine, cricket, culture, langue.</p>
            </td>
        </tr>
    </tbody>
</table>
</div>

为什么在按钮上单击语言翻译表不会出现？

1 个答案: