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. UIButton左边图片右边文字的做法

    UIImage *yuyinImage = [UIImage imageNamed:@"yuyin.png"]; [soundButton setImage:yuyinImage ...

  2. 复制图片链接和标题生成Markdown文本

    写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...

  3. 数据科学中的常见的6种概率分布（Python实现）

    作者:Pier Paolo Ippolito@南安普敦大学 编译:机器学习算法与Python实战(微信公众号:tjxj666) 原文:https://towardsdatascience.com/pr ...

  4. 按 ctrl 时会触发 shift ，导致不能正常使用 ctrl + c 复制

    问题描述 不能使用 ctrl 功能键组合,原因是按 ctrl 时 shift 也会被触发. win 10 电脑为例,可以打开虚拟键盘查看按键情况. 当我按下 ctr时 可见 shift 也被触发了. ...

  5. 《自拍教程46》Python_adb自动拍照100张

    Android手机测试, 涉及照相机(Camera)应用程序的稳定性测试的用例, 需要涉及100张照片的拍照自动化测试. 准备阶段 先清理老照片,照片一般存放在/scard/DCIM目录下 adb s ...

  6. XiaoQi.Study项目(一)

    项目地址:https://github.com/xiaoqiyaozou1/XiaoQi.Study 感谢:“老张的哲学”.“晓晨”.“杨旭”等大佬的知识分享 一.项目创建 vs 2019 创建 as ...

  7. iconfont字体图标的使用方法（转）

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  8. Java 并发原子操作类(转)

    转自:https://www.jianshu.com/p/3632a0f9f083 线程不安全的高并发实现 客户端模拟执行 5000 个任务,线程数量是 200,每个线程执行一次,就将 count 计 ...

  9. stm32的hall库新建模板编译错误： #error "Please select first the target STM32F1xx device used in your application (in stm32f1xx.h file)"的处理

    在stm32f1xx.h file文件中找到如下代码: /* Uncomment the line below according to the target STM32L device used i ...

  10. python迭代器、装饰器和生成器

    装饰器 1.装饰器的作用 1. 装饰器作用:本质是函数(装饰其他函数)就是为其他函数添加其他功能 2. 装饰器必须准寻得原则: 1)不能修改被装饰函数的源代码 2)不能修改被装饰函数的调用方式 3．实 ...