完成效果图：

<!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. webpack学习之——npm的安装依赖情况

    这几天一直在研究webpack模块话打包工具,在网上的资源还是蛮丰富的,现在总结下这块的内容,需要好好的研究下,如果有问题,还请指正. 先是第一个为问题,就是npm-install --save 和n ...

  2. centos搭建svn 服务器 并同步到web 目录（总结）

    配置搭建步骤: Linux平台的SVN服务器的配置及搭建 从本地提交代码到svn代码库. 将代码库中代码同步到web目录: 1.在web目录中checkout版本库 进入/home/www目录下  ( ...

  3. 2016年中国独角兽企业估值榜 TOP300

    2016年中国独角兽企业估值榜 TOP300[完整榜单] 类型:品牌资讯/名企动态 阅读:6735次 来源: 中商情报网 我要评论   摘要:独角兽公司是什么?独角兽公司指的是那些估值达到10亿美元以 ...

  4. JS更改字体颜色、背景颜色

    CSS 颜色十六进制值  http://www.w3school.com.cn/cssref/css_colorsfull.asp CSS background-color 属性 body { bac ...

  5. 从0开始学习 GitHub 系列之「05.Git 进阶」

    关于 Git 相信大家看了之前一系列的文章已经初步会使用了, 但是关于Git还有很多知识与技巧是你不知道的,今天就来给大家介绍下一些 Git 进阶的知识. 1. 用户名和邮箱 我们知道我们进行的每一次 ...

  6. 为什么DW的可视化下看到的效果与浏览器的效果有所区别？

    可视区不是调用外面浏览器,Dreamweav 可视化区是为用户编辑而设计. 支持最基本的 HTML 与 CSS ,对 CSS 而言,我写入样式时如果你使用最基本的样式时它显示与你浏览器中看的效果相差不 ...

  7. (实现)vue.js最简实现

    Vue.winward.js vue.js最简实现(the most simple vue.js) 让所有人都看得懂Vue原理 建议看完Vue.winward.js后,结合mpvue源码解读单页应用路 ...

  8. java 3类的继承

    模板类 泛型程序设计方法 类的组合 类的继承 java只有单继承 隐藏和覆盖 用super.x调用 访问静态属性 静态属性不继承 静态成员只有一个,不会有副本 静态成员只有一个所有的超类和子类 方法的 ...

  9. qt，pro文件中用于平台区分的写法

    qt,pro文件中用于平台区分的写法 切记: 大括号和平台需要在同一行中,否则会失效 unix { TARGET = appname } macx { TARGET = appname2 } win3 ...

  10. 【JZOJ4922】【NOIP2017提高组模拟12.17】环

    题目描述 小A有一个环,环上有n个正整数.他有特殊的能力,能将环切成k段,每段包含一个或者多个数字.对于一个切分方案,小A将以如下方式计算优美程度: 首先对于每一段,求出他们的数字和.然后对于每段的和 ...