完成效果图：

<!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. selenium(2):环境搭建完成后，初步运行遇到的问题

    检验是否搭建成功. . 问题一:运行时候,报错:请停用以开发者模式运行的扩展程序 出现错误如下: 原因:chromedriver的版本号过低了. 解决办法:应该安装与chrome版本对应的chrome ...

  2. Session学习小结

    前言: 1.我们在学习一项技术的时候,首先应该是什么时候会用到这项技术.这次学习session也是如此,一般的web项目中都有用户的存在,有用户那么就有了用户的管理,而用户往往是存在于session中 ...

  3. 项目ITP(七) javaWeb 整合 Quartz 实现动态调度 而且 持久化

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010378410/article/details/36255511 项目ITP(七) javaWe ...

  4. 2019-8-30-win10-uwp-好看的时间选择控件

    title author date CreateTime categories win10 uwp 好看的时间选择控件 lindexi 2019-08-30 08:57:20 +0800 2018-0 ...

  5. oracle-Dbca数据库模板

    数据库模板是用xml文件格式保存在本地磁盘上的数据库配置的定义. Dbca能够使用两种类型的模板:种子模板和非种子模板. 种子模板指含有定义信息和实际的数据文件与重做日志文件的模板定义. 种子模板的优 ...

  6. TYVJ1340 送礼物

    P1340 送礼物 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后 ...

  7. jmeter的关联-正则表达式的应用

    LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...

  8. 友盟iOS sdk整理

    文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...

  9. 简单利用XSS获取Cookie信息实例演示

    简单利用XSS获取Cookie信息实例演示   首先要找到一个有XXS的站,这里就不整什么大站了,谷歌一下inurl:'Product.asp?BigClassName',搜出来的命中率也比较高.随便 ...

  10. 简单线性回归（最小二乘法）python实现

      简单线性回归(最小二乘法)¶   0.引入依赖¶ In [7]: import numpy as np import matplotlib.pyplot as plt   1.导入数据¶ In [ ...