完成效果图：

<!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. LUOGU P2827 蚯蚓 (noip 2016)

    传送门 解题思路 第一眼以为是一个二叉堆,直接上优先队列60分...后来听ztz11说有单调性,新加入的蚯蚓一定比原先在的蚯蚓长度长,开三个队列,分别放原先的长度,切掉后大的那一半,切掉后小的那一半. ...

  2. QT_获取正在运行程序的进程id（判断程序是否正在运行）

    bool checkProcessRunning(const QString &processName, QList<quint64> &listProcessId) { ...

  3. 学习JDK1.8集合源码之--TreeSet

    1. TreeSet简介 TreeSet是Set的实现类之一,是不可重复集合,非线程安全的. TreeSet是SortedSet的唯一实现类,实现了元素的自动排序,排序不是以插入的顺序排序,而是默认以 ...

  4. jmeter测试APP时如何录制脚本

    jmeter录制脚本需要注意的点: (1)手机和电脑需要处于一个局域网内(如手机和电脑所使用一个wifi) (2)设置手机代理的时候手机IP填写本机IP,端口号要和jmeter的相同,一般情况下端口号 ...

  5. python开发资源链接

    1.docker docker Windows版下载:https://oomake.com/download/docker-windows docker 英文官网:https://www.docker ...

  6. 猜年龄 v1.0

    给定年龄,用户可以猜三次年龄 年龄猜对,让用户选择两次奖励 用户选择两次奖励后可以退出 age = 30 prize_dict = {0: 'durex', 1: 'okamoto', 2: 'Jis ...

  7. 《C程序设计语言》笔记（一）

    一:导言 1:printf中的格式化字符串: %ld                    按照long整型打印 %6d                   按照十进制整数打印,至少6个字符宽,不够的 ...

  8. 阿里开源新一代 AI 算法模型，由达摩院90后科学家研发

    最炫的技术新知.最热门的大咖公开课.最有趣的开发者活动.最实用的工具干货,就在<开发者必读>! 每日集成开发者社区精品内容,你身边的技术资讯管家. 每日头条 阿里开源新一代 AI 算法模型 ...

  9. 使用DataWorks调度DLA循环任务

    DataWorks是阿里云上的一款热门产品,可以为用户提供大数据开发调度服务.它支持了Data Lake Analytics(后文简称DLA)以后,DLA用户可以通过它进行定时任务调度,非常方便.本文 ...

  10. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...