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. 【S2-053】Struts2远程命令执行漏洞(CVE-2017-12611)

    继S2-052之后,Apache Struts 2再次被曝存在远程代码执行漏洞,漏洞编号S2-053,CVE编号CVE-2017-1000112. 当开发人员在Freemarker标签中使用错误的构造 ...

  2. 从零搭建Spring Cloud Gateway网关(二)—— 打印请求响应日志

    作为网关,日志记录是必不可少的功能,可以在网关出增加requestId来查询整个请求链的调用执行情况等等. 打印请求日志 打印请求日志最重要的就是打印请求参数这些东西,不过RequestBody通常情 ...

  3. 页面高度自适应方法(PC、移动端都适用)

    有个项目移动端的首页需要自适应. 宽度已经自适应了 , 高度也要自适应 ,先总结一下方法,PC端也适用. $(function(){ var h = window.innerHeight; $(&qu ...

  4. 分布式——吞吐量巨强、Hbase的承载者 LSMT

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式系统的第九篇文章. 今天给大家分享的内容是LSM树,它的英文是Log-structed Merge-tree.看着有些发怵,但其 ...

  5. java实现QQ、微信、轰炸机,撩妹,抖图功能,轻松自如

    今天交大家一个很牛的功能,让你朋友服你,他不扶你你来找我. 打游戏被骂,骂不过你来找我,我们有神器,直到他怕了为止. 废话少说,代码如下,动手,干就完了 乞丐版如下 参考连接:Java实现QQ微信轰炸 ...

  6. connection closed by foreign host / Permissions 0620 for '/etc/ssh/ssh_host_ed25519_key' are too open 解决方案

    发生此次故障的原因: 在文件夹授权时 错误的执行了 chmod -R 755 / 本来只想授权当前文件夹的 结果... 然后就导致xshell连不上了 懵逼... 解决方案 将权限收回: 执行: ch ...

  7. Arch Linux开启SSH远程安装(1.5)

    现在你的眼前应该可以看到[root@archiso~]#的提示. 首先,建立目标机器的网络设置: 安装和升级软件包前,先让本地的包数据库和远程的软件仓库同步是个好习惯. [root@archiso~] ...

  8. hdu1258 dfs 给一个指定的target数和一个数列,要求不重复选择其中的数使得和为target并打印,结果不可重复。

    #include<bits/stdc++.h> using namespace std; typedef unsigned int ui; typedef long long ll; ty ...

  9. Pandas和Numpy的一些金融相关的操作(一)

    Pandas和Numpy的一些金融相关的操作 给定一个净值序列,求出最大回撤 # arr是一个净值的np.ndarray i = np.argmax( (np.maximum.acumulate(ar ...

  10. SpringBoot 集成多数据源

    一个项目中怎么划分数据库,可以通过具体业务需求. 项目中数据源怎么如何划分,通过注解的方式@Datasource(ref="") 在方法上指定,会连接指定的数据源,这种方式比较繁琐 ...