zoukankan      html  css  js  c++  java
  • 练习- Tab切换效果

    训练要点
    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>



  • 相关阅读:
    设置Linux环境的欢迎登陆信息
    负载均衡实现之随机数
    数据库连接池原理分析及模拟实现
    SpringBoot入门 (十四) Security安全控制
    SpringBoot入门 (十三) WebSocket使用
    SpringBoot入门 (十二) 定时任务
    SpringBoot入门 (十一) 数据校验
    SpringBoot入门 (十) 发送邮件
    SpringBoot入门 (九) MQ使用
    SpringBoot入门 (八) Cache使用
  • 原文地址:https://www.cnblogs.com/pyobbiwitwsai/p/9317313.html
Copyright © 2011-2022 走看看