完成效果图：

<!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. C++ UNREFERENCED_PARAMETER函数的作用

    新建win32 application程序,会有这样一段代码 int APIENTRY wWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hP ...

  2. update批量更新某一列成其它列对应的值【原】

    update批量更新某一列成其它列对应的值 postgresql 标准sql语句 update AA set name = BB.name , AA.sex = BB.sex from BB wher ...

  3. LintCode_408 二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示). 思路 string s = ""; 目标字符串 cp 存储进位;取 0或1 sum = a[i] + b[i] + cp;分为 ...

  4. idea导入gradle项目后，找不到右边gradle窗口

    解决方案:关闭当前项目idea,随便打开个其他的项目 选择你刚刚的gradle项目 一定要选择你的gradle文件,然后OK就行了..剩下的按照指示打开就会显示gradle右边窗了 原文弟子:http ...

  5. Directx11教程(50) 输出depth/stencil buffer的内容

    原文:Directx11教程(50) 输出depth/stencil buffer的内容      有时候,我们需要查看depth/stencil buffer的内容,比如上一章中,我们要查看sten ...

  6. Effective Modern C++：04智能指针

    裸指针有着诸多缺点:裸指针的声明中看不出它指向的是单个对象还是数组:裸指针的声明中也无法看出使用完它指向的对象后是否需要删除,也就是声明中看不出裸指针是否拥有其指向的对象:即使知道要析构裸指针指向的对 ...

  7. js不停地触发按钮的事件

    例子:不断地发匿名邮件 http://tool.chacuo.net/mailsend 在控制台写:setInterval('$(".convert :input[arg]").t ...

  8. mysql中bigint、int、mediumint、smallint与tinyint的取值范围

    https://blog.csdn.net/github_39110707/article/details/74277381 mysql数据库设计,其中对性能优化,字段类型很重要,下面对bigint. ...

  9. ABP 重写主键ID 多表查询ID无效

    1.重写ID [Column("数据库指定的ID")] [Column("CarTypeID")] public override int Id { get; ...

  10. 猜年龄 v1.0

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