编程挑战

现在利用之前我们学过的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. JVM内存分配策略、各个代区、FullGC/MinorGC

    主要讨论默认的Serial/Serial Old内存分配: 一.几种分配方案 1.  对象优先在Eden分配: 一般情况下,对象会在新生代的Eden区分配,Eden区没有足够空间时,虚拟机会 发起一次 ...

  2. HDU3374 String Problem —— 最小最大表示法 + 循环节

    题目链接:https://vjudge.net/problem/HDU-3374 String Problem Time Limit: 2000/1000 MS (Java/Others)    Me ...

  3. [USACO11NOV]二进制数独Binary Sudoku

    传送门 这道题是很好的一道IDA*练习题. 首先我们先确定搜索的框架,我们要求的是用最少的修改次数使得所有的行,列,宫之内都有偶数个1,最直观的想法显然是先预处理出有奇数个1的行,列,宫,之后枚举每一 ...

  4. JNI 接口规范

    1. 简介 Java 本地接口概述 背景 JDK 1.0 本地方法接口 Java 运行时接口 原始本地接口和 Java/COM 接口 目标 Java 本地接口方法 利用 JNI 编程 JDK 1.1. ...

  5. js 模拟a标签打开新网页

      在这里备份一下,方便以后查找.   var el = document.createElement("a"); document.body.appendChild(el); e ...

  6. 【205】C#实现远程桌面访问

    参考:Remote Desktop using C#.NET 参考文件:TscForm.zip 本博客主要是讲述怎样用 .NET 平台中 Microsoft Terminal Services Cli ...

  7. oppo手机怎么打开USB调试模式

    OPPO手机USB调试的设置方法:1.ColorOS 3.0版本,进入设置--关于手机,连续点击版本号直到出现“您已处于开发者选项”,再进入设置--其他设置--开发者选项--USB调试进行设置: 2. ...

  8. hdoj5821【贪心-神题】

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,比赛的时候直接读错题了,实力带坑队友.... 题意: 有两个序列都代表筐,每个筐里只有一个球,然后序列的值代表筐里的球的颜色,问你在m次操作后,a序列的球能否变成b ...

  9. 用AntDeploy如何更新Agent

    AntDeploy AntDeploy是一款开源的一键发布部署工具,目的是代替重复性的发布动作,提高部署效率 1.一键部署iis 2.一键部署windows服务 3.一键部署到Docker 4.支持增 ...

  10. servlet重定向到jsp后样式无法正常显示

    原因是在servlet中转发时css和图片的路径变成相对于这个servlet的相对路径而非相对于web项目的路径了. 解决办法:导入css样式和图片时把css写成动态绝对路径, 如用EL表达式表示: ...