完成效果图：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>实践题 - 选项卡</title>
<style type="text/css">

/* CSS样式制作 */

*{margin:; padding:;}

div{width:260px; height:100px; padding-top:12px; padding-left:5px; font:13px/20px "微软雅黑"; margin-top:32px; border:1px steelblue solid; border-top:2px darkred solid;}

.box{width:300px; height:150px; overflow:hidden; margin:100px auto; border:none;}

.box .ul{list-style:none;}

.box .ul li:hover{cursor:pointer;}

.box .ul li{float:left; margin-left:5px; border:1px steelblue solid; border-bottom:none; padding:5px 10px; font:15px/20px "微软雅黑";}

</style>
    <script type="text/javascript">

    window.onload = function(){

        var li = document.getElementsByClassName('ul')[0].getElementsByTagName('li');

        for(var i=0;i<li.length;i++){

            li[i].onclick = function(){

                onclicks(this);

            }

        }

        li[0].onclick();

    }

    var index;

    function onclicks(x){

        if(x == index){return;}

        var li = document.getElementsByClassName('ul')[0].getElementsByTagName('li');

        var div = document.getElementsByClassName('div')

        var attribute = parseInt(x.getAttribute('index'));

        for(var z=0;z<3;z++){

            li[z].style.borderTop = '1px steelblue solid';

            li[z].style.borderBottom = 'none';

            div[z].style.display = 'none';

        }

        x.style.borderTop = '2px darkred solid';

        x.style.borderBottom = '2px #fff solid';

        div[attribute].style.display = 'block';

        index = x;

    }

    </script>
</head>

<body>

<!-- HTML页面布局 -->

<div class="box">

<ul class="ul">

<li index="0">房产</li>

<li index="1">家居</li>

<li index="2">二手房</li>

</ul>

<div class="div">

275万购昌平邻铁三居 总价20万买一居<br />

200万内购五环三居 140万安家东三环<br />

北京首现零首付楼盘 53万购东5环50平<br />

京楼盘直降5000 中信府 公园楼王现房<br />

</div>

<div class="div">

40平出租屋大改造 美少女的混搭小窝<br />

经典清新简欧爱家 90平老房焕发新生<br />

新中式的酷色温情 66平撞色活泼家居<br />

瓷砖就像选好老婆 卫生间烟道的设计<br />

</div>

<div class="div">

通州豪华3居260万 二环稀缺2居250w甩<br />

西3环通透2居290万 130万2居限量抢购<br />

黄城根小学学区仅260万 121平70万抛!<br />

独家别墅280万 苏州桥2居优惠价248万 <br />

</div>

</div>

</body>

</html>

不懂的可以在下方评论留言。

【原生JS】进阶最后一个编程篇（与之前的选项卡不同的做法）的更多相关文章

  1. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  2. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  3. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

  4. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  5. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  6. 原生js怎么删除一个 div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 关于如何利用原生js动态给一个空对象添加属性以及属性值

    首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...

  8. 原生js写的一个当前年份日期星期和时间的显示

    话不多说,所有代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  9. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

随机推荐

  1. 【笔记】LR配置ODBC连接数据库进行参数化(mysql )未完待续

    很多时候我们需要大量的参数数据,但是光光靠手填写是非常麻烦的,既然被测对象的数据都在数据库,那么我们直接读取数据库回来就轻松简便很多. data  wizard 提供了一个从ODBC的连接获得数据转化 ...

  2. Latex 出现编辑公式，出现错误 !pdfTex error: Font rntxmi7 at 438 not found

    http://docs.miktex.org/manual/advanced.html http://www.cl-projects.de/projects/misc/miktex-fonts.pht ...

  3. 【JZOJ3297】【SDOI2013】逃考(escape)

    Mission 高考又来了,对于不认真读书的来讲真不是个好消息.为了小杨能在家里认真读书,他的亲戚决定驻扎在他的家里监督他学习,有爷爷奶奶.外公外婆.大舅.大嫂.阿姨-- 小杨实在是忍无可忍了,这种生 ...

  4. 强力Django+杀手级xadmin开发在线教育网站

    强力Django+杀手级xadmin开发在线教育网站采用 Python3.7全新开发 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的 ...

  5. 顶级测试框架Jest指南：跑通一个完美的程序，就是教出一群像样的学生

    facebook三大项目:yarn jest metro,有横扫宇宙之势. 而jest项目的宗旨为:减少测试一个项目所花费的时间成本和认知成本. --其实,它在让你当一个好老师. jest文档非常简略 ...

  6. 笔记：投机和投资 F4NNIU

    笔记:投机和投资 F4NNIU 投机是零和交易. 投资是正和博弈. 投机看是短期,只关心当下. 投资是看的长期,更关注未来. 投机容易分散注意力. 投资更关心交易外的注意力. 投机像是看运气,运气有好 ...

  7. 如何在Liferay Custom JSP Fragment项目中加Java代码

    先附上大神原文链接 Adding Dependencies to JSP Fragment Bundles 在开发Liferay的过程中,我们常常会利用Module Fragment来修改Lifera ...

  8. op应用：官方，wifidog,portal,uci,luci,脚本,框架,usb

    http://wiki.openwrt.org/doc/starthttp://downloads.openwrt.org/docs/buildroot-documentation.htmlhttp: ...

  9. golang数据运算符

     

  10. iOS9新系统下App Store应用上传新指南

    http://www.cocoachina.com/appstore/20151010/13691.html 最近频繁收到小伙伴们的反馈,说经过前期学习已对ASO规则略有了解,但APP的提交审核是由技 ...