- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 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/
我有一台 MySQL 服务器和一台 PostgreSQL 服务器。 需要从多个表中复制或重新插入一组数据 MySQL 流式传输/同步到 PostgreSQL 表。 这种复制可以基于时间(Sync)或事
如果两个表的 id 彼此相等,我尝试从一个表中获取数据。这是我使用的代码: SELECT id_to , email_to , name_to , status_to
我有一个 Excel 工作表。顶行对应于列名称,而连续的行每行代表一个条目。 如何将此 Excel 工作表转换为 SQL 表? 我使用的是 SQL Server 2005。 最佳答案 这取决于您使用哪
我想合并两个 Django 模型并创建一个模型。让我们假设我有第一个表表 A,其中包含一些列和数据。 Table A -------------- col1 col2 col3 col
我有两个表:table1,table2,如下所示 table1: id name 1 tamil 2 english 3 maths 4 science table2: p
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 1 年前。 Improve th
下面两个语句有什么区别? newTable = orginalTable 或 newTable.data(originalTable) 我怀疑 .data() 方法具有性能优势,因为它在标准 AX 中
我有一个表,我没有在其中显式定义主键,它并不是真正需要的功能......但是一位同事建议我添加一个列作为唯一主键以随着数据库的增长提高性能...... 谁能解释一下这是如何提高性能的? 没有使用索引(
如何将表“产品”中的产品记录与其不同表“图像”中的图像相关联? 我正在对产品 ID 使用自动增量。 我觉得不可能进行关联,因为产品 ID 是自动递增的,因此在插入期间不可用! 如何插入新产品,获取产品
我有一个 sql 表,其中包含关键字和出现次数,如下所示(尽管出现次数并不重要): ____________ dog | 3 | ____________ rat | 7 | ____
是否可以使用目标表中的LAST_INSERT_ID更新源表? INSERT INTO `target` SELECT `a`, `b` FROM `source` 目标表有一个自动增量键id,我想将其
我正在重建一个搜索查询,因为它在“我看到的”中变得多余,我想知道什么 (albums_artists, artists) ( ) does in join? is it for boosting pe
以下是我使用 mysqldump 备份数据库的开关: /usr/bin/mysqldump -u **** --password=**** --single-transaction --databas
我试图获取 MySQL 表中的所有行并将它们放入 HTML 表中: Exam ID Status Assigned Examiner
如何查询名为 photos 的表中的所有记录,并知道当前用户使用单个查询将哪些结果照片添加为书签? 这是我的表格: -- -- Table structure for table `photos` -
我的网站都在 InnoDB 表上运行,目前为止运行良好。现在我想知道在我的网站上实时发生了什么,所以我将每个页面浏览量(页面、引荐来源网址、IP、主机名等)存储在 InnoDB 表中。每秒大约有 10
我在想我会为 mysql 准备两个表。一个用于存储登录信息,另一个用于存储送货地址。这是传统方式还是所有内容都存储在一张表中? 对于两个表...有没有办法自动将表 A 的列复制到表 B,以便我可以引用
我不是程序员,我从这个表格中阅读了很多关于如何解决我的问题的内容,但我的搜索效果不好 我有两张 table 表 1:成员 id*| name | surname -------------------
我知道如何在 ASP.NET 中显示真实表,例如 public ActionResult Index() { var s = db.StaffInfoDBSet.ToList(); r
我正在尝试运行以下查询: "insert into visits set source = 'http://google.com' and country = 'en' and ref = '1234
我是一名优秀的程序员,十分优秀!