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. 7种你应该知道的JavaScript常见的错误

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/types-of-native-errors-in- ...

  2. 19.10.11学习日记随笔 mysql事务隔离性

    一天的感悟 学习事务的处理方式,其中反想自己学过的flask 默认是开启事务的,flask_sqlalchemy每次在提交时都是需要commit,或者失败是需要rollback回滚操作的,其实pyth ...

  3. R语言实战（三） 图形初阶

    3.1 使用图形 plot:基础绘图 abline:添加回归直线 hist:绘制直方图 boxplot:绘制箱线图 dev.new():returns the return value of the ...

  4. 微信小程序接入LeanCloud

    大家在做小程序或者客户端开发的时候肯定会想使得数据进行联网,但这样就必须有对应的后台服务器以及数据库,再加上linux运维等各种细节,往往会对新手比较劝退,在这里给大家推荐一种bass(后端即服务), ...

  5. java第一次上机练习作业

    1.已知a,b均是整型变量,写出将a,b两个变量中的值互换的程序.(知识点:变量和 运算符综合应用) int a = 5, b = 10; int temp; temp = a; a = b; b = ...

  6. JVM入门必看——JVM结构

    转载自:http://blog.csdn.net/yfqnihao 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让 ...

  7. 在Centos系统中基于PowerDNS实现master和slave的域名解析服务双备份

    在上一篇文章中,阐述了如何在Centos 7系统(其他版本的Centos未尝试)中基于PowerDNS和poweradmin自建域名解析服务器替代DnsPod的过程.但是在一般的DNS服务中,我们需要 ...

  8. linux redis安装 5.0.2

    参看:https://www.cnblogs.com/limit1/p/9045183.html 1.获取redis资源 wget http://download.redis.io/releases/ ...

  9. String类，string类的特点

    1,String类是final修饰的,不能被继承 2,String类的底层使用数组存储 JDK1.9之前:char[]value JDK1.9之后:byte[]value 3,String类的对象不可 ...

  10. asp.net core系列 76 Apollo 快速安装模式下填坑和ASP.NetCore结合使用

    前言:由于公司占时没有运维,出于微服务的需要,Apollo只能先装在windows 阿里云上跑起来,由于环境及网络等问题,在安装过程中遇到很多坑,算是一个个坑填完后,最终实现. 一. java jdk ...