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. php获取当前周的第一天与最后一天

    1 2 3 4 5 6 7 8 9 10 // 当前日期   $sdefaultDate = date("Y-m-d");   // $first =1 表示每周星期一为开始日期  ...

  2. PHP的for循环

    For循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块.for循环用于您预先知道脚本需要运行的次数的情况 for(初始值:条件:增量) { 要执行的代码: } <html> ...

  3. golang的sync.WaitGroup使用示例

    下面一段代码 len(m) 不一定会打印为 10,为什么?.如果想要 len(m) 打印为 10,应该怎么修改代码? func main() { const N = 10 m := make(map[ ...

  4. SQL逗号合并一列多行的值

    select stuff((select ','+行名 from 表名 for xml path('')),1,1,'')

  5. go源码分析(二) 使用go http包开发web时遇到的坑之重复注册Handle路由

    我们使用Handle注册http时 如果添加两行,即重复注册函数. http.HandleFunc("/",index) http.HandleFunc("/" ...

  6. Airport Simulation (数据结构与算法 – 队列 / Queue 的应用)

    Airport Simulation 是数据结构与算法教材中用于演示Queue的一个小程序(大多数教师似乎会跳过这个练习).主程序会通过输入总的运行时间.队列里可以等待的最多飞机数量,平均每个时间单元 ...

  7. python-参考书

    真的是找了很多的参考书,但是看懂,上手用的就一本比较好的<编程小白的第1本python入门书>非常的好. 属于那种一看就懂,能说明白的.别的,要么就是翻译的外文的,有点难以理解,要么就是中 ...

  8. docker-ce 在windows10下使用volume的注意事项

    最近想搭建一套CI/CD环境尝试一下,因为手里云服务太小了(1C1G),撑不起来gitlab和jenkins.恰巧年前配了台高配版的windows机器,就想在家里的机器上通过docker装gitlab ...

  9. MyBatis框架——单表查询

    Mybatis单表查询,示例 1.创建数据库 /* Navicat MySQL Data Transfer Source Server : localhost Source Server Versio ...

  10. macOS开发:调整NSImage尺寸大小

    原文链接 extension NSImage { func resize(_ to: CGSize, isPixels: Bool = false) -> NSImage { var toSiz ...