gpt4 book ai didi

javascript - 为什么单击按钮时不出现语言翻译表?

转载 作者:行者123 更新时间:2023-11-28 00:21:21 26 4
gpt4 key购买 nike

我使用 html 和 javascript 制作了自己的简历,并且我想要我的语言中有两个选项用于语言更改(我选择 html-Java 脚本,这将是一个很好的示例,因为我是初学者)。

我有两个英语和法语简历表,分别位于 div“eng-tab”和“frc-tab”内。

我想要的是:在运行我的代码时,必须将默认显示为英语简历,而它将还包含两个用于语言翻译的法语和英语按钮,这样当用户希望将其翻译为法语时,他将单击法语按钮,它将替换英文简历和法语版本简历(通过包含“frc-tab”的 div)在同一位置。

我的代码有什么问题?

(1.) 问题是当我运行我的代码时,它显示默认的 CV 没有任何问题,但是当我单击任何按钮来更改翻译时,它不显示任何 CV 。我不知道为什么?这个问题有什么解决办法吗?

最佳答案

您的代码有 div 错误..div 未正确关闭,并且您还必须在代码中导入 jquery 插件 http://code.jquery.com/jquery-1.8.3.js

这是更新后的文件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>

关于javascript - 为什么单击按钮时不出现语言翻译表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29999421/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com