训练要点
document对象的getElementById( )方法
使用CSS的属性display控制层的显示和隐藏
使用JavaScript动态的改变CSS属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第一种</title>
<style>
#form2,#form3{
display: none;
}
#d1{
background-color: orange;
}
</style>
<script>
function show(x,y){
var qwq = document.getElementsByClassName("c1");
for(var i = 0;i<qwq.length;i++){
qwq[i].style.backgroundColor="white";
}
document.getElementById(x).style.backgroundColor="orange";
var asd = document.getElementsByClassName("c2");
for(var i=0;i<asd.length;i++){
asd[i].style.display="none";
}
var zxc = document.getElementById(y);
zxc.style.display="block";
}
</script>
</head>
<body>
<table border="1">
<tr>
<td class="c1" id="d1" onclick="show('d1','form1')">笔记本</td>
<td class="c1" id="d2" onclick="show('d2','form2')">手机充值</td>
<td class="c1" id="d3" onclick="show('d3','form3')">其他</td>
</tr>
<tr>
<td colspan="3">
<div class="c2" id="form1">
<form>
第一个表单
</form>
</div>
<div class="c2" id="form2">
<form >
第二个表单
</form>
</div>
<div class="c2" id="form3">
<form >
第三个表单
</form>
</div>
</td>
</tr>
</table>
</body>
</html>
==================================================================================================================================================================================================================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第二种</title>
<style>
#form2,#form3{
display: none;
}
#d1{
background-color: orange;
}
</style>
<script>
function show(x,y){
var qwq = document.getElementsByClassName("c1");
for(var i = 0;i<qwq.length;i++){
qwq[i].style.backgroundColor="white";
}
x.style.backgroundColor="orange";
var asd = document.getElementsByClassName("c2");
for(var i=0;i<asd.length;i++){
asd[i].style.display="none";
}
var zxc = document.getElementById(y);
zxc.style.display="block";
}
</script>
</head>
<body>
<table border="1">
<tr>
<td class="c1" id="d1" onclick="show(this,'form1')">笔记本</td>
<td class="c1" onclick="show(this,'form2')">手机充值</td>
<td class="c1" onclick="show(this,'form3')">其他</td>
</tr>
<tr>
<td colspan="3">
<div class="c2" id="form1">
<form>
第一个表单
</form>
</div>
<div class="c2" id="form2">
<form >
第二个表单
</form>
</div>
<div class="c2" id="form3">
<form >
第三个表单
</form>
</div>
</td>
</tr>
</table>
</body>
</html>