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. 【沫沫金】使用Serv-U FTP服务，搭建文件服务器

    内网文件服务器安装Serv-U FTP 链接: https://pan.baidu.com/s/1G51D1enLqZCUhnprnjAITw 提取码: snah Java Web工程,引入 comm ...

  2. PHP数组的升序降序函数

    数组排序函数:::sort()对数组进行升序排列rsort()对数组进行降序排列 asort()根据关联数组的值,对数组进行升序排列ksort()根据关联数组的键,对数组进行升序排列 arsort() ...

  3. 数据结构 5 哈希表/HashMap 、自动扩容、多线程会出现的问题

    上一节,我们已经介绍了最重要的B树以及B+树,使用的情况以及区别的内容.当然,本节课,我们将学习重要的一个数据结构.哈希表 哈希表 哈希也常被称作是散列表,为什么要这么称呼呢,散列.散列.其元素分布较 ...

  4. 5G 将带给程序员哪些新机会呢？

    5G,第 5 代移动通信技术,华为在此领域远远领先同行,这也让它成了中美贸易战的最前线.我的第一份工作就在通信行业,当时电信标准都在欧美企业手里,国内企业主要是遵照标准研发软硬件设备,核心芯片靠进口. ...

  5. javaScript 基础知识汇总 （十四）

    1.回调 什么是回调? 个人理解,让函数有序的执行. 示例: function loadScript(src,callback){ let script = document.createElemen ...

  6. 左侧带三角的Card css支持hover阴影

    <div class="inputReportIndex"> <div class="inner"> <div class=&qu ...

  7. java-乘法口诀表。（新手）

    //创建的一个包名. package qige; //定义一个类. public class KJ { //公共静态的一个主方法. public static void main(String[] a ...

  8. Mol Cell Proteomics. | Integration and analysis of CPTAC proteomics data in the context of cancer genomics in the cBioPortal (解读人：徐洪凯)

    文献名:Integration and analysis of CPTAC proteomics data in the context of cancer genomics in the cBioP ...

  9. Vue-Cli4笔记

    Vue-Cli4与Vue-Cli2区别浅谈 当时学习 Vue-Cli 的时候看的是 Vue-Cli2 的相关教程,当把 package.json 上传 github 的时候提醒有安全问题,于是准备使用 ...

  10. datetime和time

    datetime和time 1.datetime模块 import datetimenow = datetime.datetime.now() #时间对象print(now,type(now))pri ...