编程挑战

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

文字素材:

房产：

275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房

家居:

40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计

二手房：

通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万
 
   我的解答

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS综合练习-选项卡</title>

    <style type="text/css">

        /* CSS样式制作 */

        body, ul, li, a, ol{

            margin: 0;

            padding: 0;

        }

        a{

            text-decoration: none;

            color: #000;

        }

        li{

            list-style: none;

        }

        .header{

            overflow: hidden;

            width: 350px;

        }

        .header li{

            float: left;

            margin-left: 10px;

            text-align: center;

            line-height: 30px;

            width: 98px;

            height: 30px;

            border: 1px solid #888;

            border-bottom: none;

        }

        .header .active{

            border-top: 2px solid #8B4513;

            background-color: #fff;

        }

        .header li a{

            display: block;

            height: 30px;

            width: 98px;

        }

        #content ul{

            border: 1px solid #7396B8;

            border-top: 2px solid #8B4513;

            padding: 10px;

            width: 380px;

            height: 110px;

            position: relative;

            top: -2px;

            z-index: -1;

        }

        .notshow{

            display: none;

        }

    </style>

    <script type="text/javascript">

        // JS实现选项卡切换

        window.onload=function () {

            var header = document.getElementById("header");

            var lilist = header.getElementsByTagName("li");

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

                lilist[i].index = i;

                lilist[i].onclick = function () {

                    var content = document.getElementById("content");

                    var ulist = content.getElementsByTagName("ul");

                    for(var k=0;k<lilist.length;k++){

                        lilist[k].setAttribute("class","");

                        ulist[k].setAttribute("class","notshow");

                    }

                    this.setAttribute("class","active");

                    ulist[this.index].setAttribute("class","");

                }

            }

        }

    </script>

</head>

<body>

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

<ul id="header" class="header">

    <li class="active"><a href="#">房产</a></li>

    <li><a href="#">家居</a></li>

    <li><a href="#">二手房</a></li>

</ul>

<div id="content">

    <ul>

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

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

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

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

    </ul>

    <ul class="notshow">

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

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

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

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

    </ul>

    <ul class="notshow">

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

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

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

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

    </ul>

</div>

</body>

</html>

编程挑战JavaScript进阶篇（慕课网题目）的更多相关文章

  1. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  2. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  3. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  4. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  5. Javascript进阶篇——(函数)笔记整理

    这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记 什么是函数如果需要多次使用同一段代码,可以把它们封装成一个函数.函数(function)就是一组允许在你的代码里随时调用的语句 ...

  6. Javascript进阶篇——(JS基础语法)笔记整理

    根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  8. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  9. Javascript进阶篇——( 事件响应)笔记整理

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 鼠标单击事件(on ...

随机推荐

  1. ubuntu主板信息

    root:~# sudo dmidecode |grep -A16 "System Information$"sudo: 无法解析主机:phone-TPOWER-X79System ...

  2. 一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. PostgreSQL 图形化客户端工具有哪些

    linux下有字符界面的:psql         图形界面的:pgaccesswindows系统可以用:phpPgAdmin或者telnet+psql 和phpmyadmin 一家的phpPgAdm ...

  4. org.hibernate.hql.ast.QuerySyntaxException: Student is not mapped [from Student as stu where stu.sclass=?]

    java.lang.IllegalArgumentException: org.hibernate.hql.ast.QuerySyntaxException: t_aty_disease is not ...

  5. GetSafeHwnd()

    CreateCompatibleBitmap The CreateCompatibleBitmap function creates a bitmap compatible with the devi ...

  6. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时2

    课时2 计算机视觉历史回顾与介绍中 1966年是计算机视觉的诞生年. 视觉处理流程的第一步,是对简单的形状结构处理,边缘排列. 边缘决定了结构. David Marr写了一本非常有影响力的书,视觉是分 ...

  7. 详解Supervisor进程守护监控

    Supervisor在百度百科上给的定义是超级用户,监管员.Supervisor是一个进程管理工具,当进程中断的时候Supervisor能自动重新启动它.可以运行在各种类unix的机器上,superv ...

  8. Swift3.0 UICollectionView 删除,拖动

    UICollectionView实现了一下常见的新闻分类.  附有效果图 近期一直在深入学习swift,实现了CollectionView item的头东与删除,用的都是系统的一些函数方法,看起来比较 ...

  9. spring-data-redis 使用过程中踩过的坑

    spring-data-redis简介 Spring-data-redis是spring大家族的一部分,提供了在srping应用中通过简单的配置访问redis服务,对reids底层开发包(Jedis, ...

  10. Jmeter逻辑控制器操作，附栗子

    jmeter中的逻辑控制器确定采样器的执行顺序.右键线程组-->添加-->逻辑控制器. 一.简单控制器 简单控制器对JMeter如何处理添加到其中的采样器没有影响.只是方便我们做分组命名. ...