23:10:25 2019-08-14

自己写的这个好丑。。。。

题目：利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

(另外 这个动图是怎么插入的 用url就行 复制就不行)

我写的效果图：

(一对比就好丑)

代码

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>实践题 - 选项卡</title>

     <style type="text/css">

     div{

         border:1px black solid;

         width:300px;

         height:100px;

     }

     input{

         background-color:white;

     }

     </style>

     <script type="text/javascript">

         function changeText(n)

         {

             var div=document.getElementById("div");

             switch(n)

             {

                 case 1:

                 div.innerHTML="275万购昌平邻铁三居 总价20万买一居"+"<br/>"+"200万内购五环三居 140万安家东三环"+"<br/>"+

                     "北京首现零首付楼盘 53万购东5环50平"+"<br/>"+"京楼盘直降5000 中信府 公园楼王现房"

                     break;

                 case 2:

                  div.innerHTML="40平出租屋大改造 美少女的混搭小窝"+"<br/>"+"经典清新简欧爱家 90平老房焕发新生"+"<br/>"+

                     "新中式的酷色温情 66平撞色活泼家居"+"<br/>"+"瓷砖就像选好老婆 卫生间烟道的设计"

                     break;

                 case 3:

                 div.innerHTML="通州豪华3居260万 二环稀缺2居250w甩"+"<br/>"+" 西3环通透2居290万 130万2居限量抢购"+"<br/>"+

                     "黄城根小学学区仅260万 121平70万抛!"+"<br/>"+"独家别墅280万 苏州桥2居优惠价248万"

                     break;

             }

         }

     </script>

 </head>

 <body>

 <input id="button1" type="button" value="房产" onclick="changeText(1)"/>

 <input id="button2" type="button" value="家居" onclick="changeText(2)"/>

 <input id="button3" type="button" value="二手房" onclick="changeText(3)"/>

 <div id="div">275万购昌平邻铁三居 总价20万买一居<br/>

      200万内购五环三居 140万安家东三环<br/>

      北京首现零首付楼盘 53万购东5环50平<br/>

      京楼盘直降5000 中信府 公园楼王现房<br/>

      </div>

 </body>

 </html>

我的想法是 三个button下一个div元素

点击button时切换div文本元素的内容

答案

 <!DOCTYPE html>

 <html>

  <head>

   <title>浏览器对象</title>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <style type="text/css">

     *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}

     #tabs{width:290px;padding:5px;height:150px;margin:20px;}

     #tabs ul{list-style: none;height: 30px;line-height:30px;border-bottom:2px saddlebrown solid;}

     #tabs ul li{background:#fff;cursor: pointer;list-style: none;float: left;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}

     #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}

     #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top: none;padding:5px;}

     .hide{display:none;}

   </style>

   <script type="text/javascript">

         window.onload=function()

         {

            var fDiv=document.getElementById("tabs"); //获得父元素div

            var fUl=fDiv.getElementsByTagName("ul")[0]; //获得父元素

            var lis=fUl.getElementsByTagName("li");    //通过父元素获得li元素的数组

            var sDivs=fDiv.getElementsByTagName("div")  //通过父元素div获得子元素div的数组

            for(var i=0,len=lis.length;i<len;i++)      //javascript中变量可以不声明就使用 最好不要这样写

            {

               lis[i].index=i;     //引入自定义属性 利用这种方式在后面更改classname

               lis[i].onclick=function()

               {

                 for(var n=0;n<len;n++)

                 {

                   lis[n].className="";

                   sDivs[n].className="hide";

                 }

                 this.className="on";

                 sDivs[this.index].className="";  //这里用到index 因为 lis数组下index指数 是与sDiv数组一一对应的

               };

            }

         }

  </script>

  </head>

  <body>

  <div id="tabs">

     <ul>

         <li class="on">房产</li>

         <li>家居</li>

         <li>二手房</li>

     </ul>

     <div>

         275万购昌平邻铁三居 总价20万买一居<br>

         200万内购五环三居 140万安家东三环<br>

         北京首现零首付楼盘 53万购东5环50平<br>

         京楼盘直降5000 中信府 公园楼王现房<br>

     </div>

     <div class="hide">

         40平出租屋大改造 美少女的混搭小窝<br>

         经典清新简欧爱家 90平老房焕发新生<br>

         新中式的酷色温情 66平撞色活泼家居<br>

         瓷砖就像选好老婆 卫生间烟道的设计<br>

     </div>

     <div class="hide">

         通州豪华3居260万 二环稀缺2居250w甩<br>

         西3环通透2居290万 130万2居限量抢购<br>

         黄城根小学学区仅260万 121平70万抛!<br>

         独家别墅280万 苏州桥2居优惠价248万<br>

     </div>

   </div>

 </body>

 </html>

光从css上来看就差了好多。。 代码还是比较好理解的 每个点击时 先把每个选项卡设置不强调的状态  选项卡内容设置为隐藏  再设置点击的选项卡为强调 和 对应的选项卡内容显示

Html 慕课园编程练习10-1的更多相关文章

  1. Html 慕课园编程练习9-22

    题目要求: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. ...

  2. [.net 面向对象编程基础] (10) 类的成员（字段、属性、方法）

    [.net 面向对象编程基础] (10) 类的成员(字段.属性.方法) 前面定义的Person的类,里面的成员包括:字段.属性.方法.事件等,此外,前面说的嵌套类也是类的成员. a.类的成员为分:静态 ...

  3. 【并行计算-CUDA开发】GPGPU OpenCL/CUDA 高性能编程的10大注意事项

    GPGPU OpenCL/CUDA 高性能编程的10大注意事项 1.展开循环 如果提前知道了循环的次数,可以进行循环展开,这样省去了循环条件的比较次数.但是同时也不能使得kernel代码太大. 循环展 ...

  4. Linux高并发网络编程开发——10-Linux系统编程-第10天（网络编程基础-socket）

    在学习Linux高并发网络编程开发总结了笔记,并分享出来.有问题请及时联系博主:Alliswell_WP,转载请注明出处. 10-Linux系统编程-第10天(网络编程基础-socket) 在学习Li ...

  5. GPGPU OpenCL/CUDA 高性能编程的10大注意事项

    转载自:http://hc.csdn.net/contents/content_details?type=1&id=341 1.展开循环 如果提前知道了循环的次数,可以进行循环展开,这样省去了 ...

  6. 关于shell脚本编程的10个最佳实践

    每一个在UNIX/Linux上工作的程序员可能都擅长shell脚本编程.但大家解决问题的方式却不尽相同,这要取决于对专业知识的掌握程度.使 用命令的种类.看待问题的方式等等.对于那些处在shell脚本 ...

  7. PHP编程中10个最常见的错误

    PHP是一种非常流行的开源服务器端脚本语言,你在万维网看到的大多数网站都是使用php开发的.本篇经将为大家介绍PHP开发中10个最常见的问题,希望能够对朋友有所帮助. 错误1:foreach循环后留下 ...

  8. 【Java并发编程】10、Java 理论与实践: 正确使用 Volatile 变量

    转自:http://www.importnew.com/15842.html Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 synchronized”:与 synchron ...

  9. 掌握Linux编程的10个步骤

    Linux 编程经典书籍推荐 Denis 2008年10月17日 浏览:84168 成为一名精通 Linux 程序设计的高级程序员一直是不少朋友孜孜以求的目标.根据中华英才网统计数据,北京地区 Lin ...

随机推荐

  1. 网址封锁的几种方法 公司把 pan.baidu.com 封了 研究实现原理

    HTTP 和 HTTPS 协议HTTP 协议在 头部会发送 host 就是要访问的域名,可以用来被检测. HTTPS 协议虽然会加密全部通讯,但是在握手之前还是明文传输.有证书特证可被检测. 1, D ...

  2. 实操教程丨使用Pod安全策略强化K8S安全

    本文来自Rancher Labs 什么是Pod安全策略? Kubernetes Pod安全策略(PSP)是Kubernetes安全版块中极为重要的组件.Pod安全策略是集群级别的资源,用于控制Pod安 ...

  3. 死磕Lambda表达式（三）：更简洁的Lambda

    我们都是阴沟里的虫子,但总还是得有人仰望星空.--<三体> 在之前的文章中介绍了Lambda表达式的基本语法和正确使用姿势,这次我来介绍一些Lambda更简洁的用法. 欢迎关注微信公众号: ...

  4. 可运行jar包的几种打包/部署方式(转)

    转自:https://www.cnblogs.com/yjmyzz/p/executable-jar.html java项目开发中,最终生成的jar,大概可分为二类,一类是一些通用的工具类(不包含ma ...

  5. LeetCode#232-Implement Queue using Stacks-用栈实现队列

    一.题目 使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返回队列首部的元素. empty() -- 返回队列 ...

  6. 免注册公众号的三种微信推送消息服务的C#代码实现

    有时候我们需要监控一些网络上的变化,但是每次去刷新网页却又很麻烦,而且大部分刷新的时候网页并没有更新.那么有没有一个工具,可以监控网页变化,并将变化的结果推送到手机微信上呢? 这里有很多应用场景,比如 ...

  7. JDK dump

    1. 查看整个JVM内存状态 jmap -heap 1237(pid) 2.生成dump文件 jmap -dump:file=文件名.dump 1237(pid)

  8. 使用 Docker 部署 Spring Boot 项目

    Docker 介绍 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器解决方案. Docker 将应用程序与该程序的依赖,打包在一个文件里面 ...

  9. win7系统下的Nodejs开发环境配置

    此处不推荐使用msi安装包直接安装nodejs,我们应该知道它里面做了哪些事情,这样以后出问题的时候,可以更快速地定位问题点.另一方面,直接安装的情况,以后更新了版本的话会很麻烦,因为如果我们想体验新 ...

  10. hdu2732 最大流+拆点

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2732 题目给定一个场景,有n*m个方格,每个方格代表一个柱子,一个柱子可以承受不同次数的跳跃,开始时图 ...