编程挑战

现在利用之前我们学过的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. p1199八数码问题

    oj上简化的八数码问题,最强的数据仅仅是20步: 根据曼哈顿距离构造启发函数: 主算法:IDA*:(使用方法好像不太对......) 未用位运算优化: #include<iostream> ...

  2. 缓存框架Ehcache相关

    单点缓存框架   只能针对单个jvm中,缓存容器存放jvm中,每个缓存互不影响  Ehcache gauva chache 内置缓存框架 jvm缓存框架 分布式缓存框架(共享缓存数据)  Redis ...

  3. 禅道——Linux服务器部署禅道

    前言 2019年6月14日 22:01:24 看看时间我知道,我离猝死依然不远~ 禅道是什么 | 禅道是专业的研发项目管理软件 禅道的官网 | https://www.zentao.net/ 禅道开源 ...

  4. 通过ODC方法改善软件测试：3个案例研究

    正交缺陷分类法(ODC)是一种用于分析软件缺陷的归类方法.它可以结合软件开发过程的一系列数据分析技术,为测试组织提供了一个强大的针对开发过程和软件产品的评估方法.在本篇文章中,会列举三个案例研究来说明 ...

  5. Android「后台下载」Feb.24小记

    参考了CSDN上的这个文章(HERE),之前只是新开一个线程: public class DownloadThread implements Runnable{ String tarFile ; pu ...

  6. bzoj1087互不侵犯King——状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1087 水题... 然而犯了两个致命小错误,调了好半天...详见注释. 代码如下: #incl ...

  7. 压缩&&解压

    压缩与解压缩: ############################################################# tar xvf wordpress.tar       ## ...

  8. linux-3.0内核移植到fl2440开发板（以s3c2410为模板）

    1.新建kernel文件夹,用于存放内核文件 [weishusheng@localhost ~]$ mkdir kernel 2.进入kernel,上传压并解压压缩文件 [weishusheng@lo ...

  9. 1-1 课程导学 & 1-2 项目需求分析，技术分解.

    1-1 课程导学 1-2 项目需求分析,技术分解. 要有一定的dart基础,了解安卓和ios的一些普通的开发

  10. Cardboard profile的修改

    Cardboard盒子中,手机屏幕大小.镜片离屏幕距离,屏幕分辨率等都会影响配戴者的眼中成像,通过对生成图像的变形可以部份解决这一问题,cardboard sdk中提供了cardboardprofil ...