编程挑战

现在利用之前我们学过的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. 小玩Spring Boot

    Spring Boot是Spring Mvc的升级版 号称是替代者 也是微服务的微框架基础 有3启动方式 用IntelJ IDEA 生成spring boot工程 1.有个入口类 可以直接run as ...

  2. vue-router-h5-history

    vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new V ...

  3. codeforcfes Codeforces Round #287 (Div. 2) B. Amr and Pins

    B. Amr and Pins time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. html5--6-52 动画效果-过渡

    html5--6-52 动画效果-过渡 实例 @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; f ...

  5. html5--6-51 阶段练习3-旋转导航

    html5--6-51 阶段练习3-旋转导航 @charset="UTF-8"; ul{ list-style: none; font-size:24px; font-weight ...

  6. 一步一步学Silverlight 2系列（17）：数据与通信之ADO.NET Data Services

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

  7. 【SCOI 2009】 Windy数

    [题目链接] 点击打开链接 [算法] 数位DP,注意处理前导零的情况 [代码] #include<bits/stdc++.h> using namespace std; #define M ...

  8. 内部锁之一：锁介绍（偏向锁 & 轻量级锁 & 重量级锁 & 各自优缺点及场景）

    一.内部锁介绍 上篇文章<Synchronized之二:synchronized的实现原理>中向大家介绍了Synchronized原理及优化锁.现在我们应该知道,Synchronized是 ...

  9. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  10. threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

    最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...