练习- Tab切换效果

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_34125592

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量202

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pyobbiwitwsai/p/9317313.html

版权

训练要点
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" οnclick="show('d1','form1')">笔记本</td>
 <td class="c1" id="d2" οnclick="show('d2','form2')">手机充值</td>
 <td class="c1" id="d3" οnclick="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" οnclick="show(this,'form1')">笔记本</td>
 <td class="c1" οnclick="show(this,'form2')">手机充值</td>
 <td class="c1" οnclick="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>