我的网站的大部分页面都有以下代码。
<img src="img/english.png" alt="English" width="25" height="25" class="Clickable" title="View in English" onclick="document.body.className='en'" /></em><img src="img/arabic.png" alt="Arabic" width="25" height="25" class="Clickable" title="View in Arabic" onclick="document.body.className='ar'" />
它可以与我的CSS文件一起使用，在点击时隐藏每个类的div，英文显示为默认值。
CSS：
body.en :lang(ar) {
display: none;
}
body.ar :lang(en) {
display: none;
}
HTML：
<body onload="document.body.className='en'">
但是，一旦用户使用我的联系表单，那么JavaScript将不再在该网站上运行。
body {
background-color: #B5E2FB;
font-family: "Myriad Web Pro";
text-align: center;
}
.NavBar {
border-right-color: #999;
border-left-color: #999;
}
a:hover {
filter: alpha(opacity=50);
opacity: 0.5;
}
.Footer {
text-align: center;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/glyphish/glyphish/16/47-fuel-icon.png"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fantastic Fuel | Contact</title>
</head>
<body>
<table align="center" width="1000" border="0">
<tr>
<td height="145" bgcolor="#5CA7C2"><img src="img/header.png" width="1000" height="145" /></td>
</tr>
<tr>
<td height="50" bgcolor="#5CA7C2"><a href="index.html"><img src="img/home.png" alt="Home Button" width="200" height="50" border="0" class="NavBar" /></a><a href="about.html"><img src="img/about.png" alt="About Button" width="200" height="50" border="0" class="NavBar" /></a><a href="contact.html"><img src="img/contact.png" alt="Contact Button" width="200" height="50" border="0" class="NavBar" /></a><a href="faq.html"><img src="img/faq.png" alt="FAQ Button" width="200" height="50" border="0" class="NavBar" /></a><a href="products.html"><img src="img/products.png" alt="Products Button" width="200" height="50" border="0" class="NavBar" /></a></td>
</tr>
<tr>
<td height="26" valign="top" bgcolor="#5CA7C2"><table width="1000" border="0">
<tr>
<td width="200"> </td>
<td width="586">
<body>
<div class="wrapper">
<div align="left" id="main">
<form id="contact-form" action="send_form_email.php" method="post">
<h3>Get in touch</h3>
<h4>Fill in the form below, and we'll get back to you within 24 hours.</h4>
<form name="contactform" method="post" action="send_form_email.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
<td width="200"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="49" bgcolor="#5CA7C2"><p class="Footer">Copyright <strong>© </strong>Fantastic Fuel LLC 2015. All Rights Reserved. Produced as part of Hugh Raynor's IT BTEC.</p></td>
</tr>
</table>
</body>
</html>
感谢任何建议。
body {
background-color: #B5E2FB;
font-family: "Myriad Web Pro";
text-align: center;
}
.NavBar {
border-right-color: #999;
border-left-color: #999;
}
a:hover {
filter: alpha(opacity=50);
opacity: 0.5;
}
.Footer {
text-align: center;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/glyphish/glyphish/16/47-fuel-icon.png"/>
<meta HTTP-EQUIV="REFRESH" content="5; url=http://www.fantasticfuel.com">
<title>Fantastic Fuel | Contact</title>
</head>
<body>
<table align="center" width="1000" border="0">
<tr>
<td height="145" bgcolor="#5CA7C2"><img src="img/header.png" width="1000" height="145" /></td>
</tr>
<tr>
<td height="50" bgcolor="#5CA7C2"><a href="index.html"><img src="img/home.png" alt="Home Button" width="200" height="50" border="0" class="NavBar" /></a><a href="about.html"><img src="img/about.png" alt="About Button" width="200" height="50" border="0" class="NavBar" /></a><a href="contact.html"><img src="img/contact.png" alt="Contact Button" width="200" height="50" border="0" class="NavBar" /></a><a href="faq.html"><img src="img/faq.png" alt="FAQ Button" width="200" height="50" border="0" class="NavBar" /></a><a href="products.html"><img src="img/products.png" alt="Products Button" width="200" height="50" border="0" class="NavBar" /></a></td>
</tr>
<tr>
<td height="26" valign="top" bgcolor="#5CA7C2"><table width="1000" border="0">
<tr>
<td width="200"> </td>
<td width="586">
<body>
<div class="wrapper">
<div align="left" id="main">
<p>Thanks for contacting Fantastic Fuel, your message has been recieved and you will be sent a response shortly. </p>
<p>You will automatically be redirected in a few seconds.</p>
</div>
</div>
<td width="200"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="49" bgcolor="#5CA7C2"><p class="Footer">Copyright <strong>© </strong>Fantastic Fuel LLC 2015. All Rights Reserved. Produced as part of Hugh Raynor's IT BTEC.</p></td>
</tr>
</table>
</body>
</html>