编程挑战

现在利用之前我们学过的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. Codeforces Beta Round #25 (Div. 2 Only)D. Roads not only in Berland

    D. Roads not only in Berland time limit per test 2 seconds memory limit per test 256 megabytes input ...

  2. SDUT OJ 2892 A (字典树问题-输出出现次数最多的字符串的出现次数，60ms卡时间，指针+最后运行完释放内存)

    A Time Limit: 60ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 给出n(1<= n && n <= 2*10^6)个字 ...

  3. HDU3045 Picnic Cows —— 斜率优化DP

    题目链接:https://vjudge.net/problem/HDU-3045 Picnic Cows Time Limit: 8000/4000 MS (Java/Others)    Memor ...

  4. hdu 1286 找新朋友（欧拉函数）

    题意:欧拉函数 思路:欧拉函数 模板,代码略.

  5. 关于include，load的几个问题

    参考:http://www.network-theory.co.uk/docs/gccintro/gccintro_17.html 1. include的文件在哪找,找不到会如何? 工具: gcc - ...

  6. codeforces 414A A. Mashmokh and Numbers(素数筛)

    题目链接: A. Mashmokh and Numbers time limit per test 1 second memory limit per test 256 megabytes input ...

  7. javascript之递归得DOM文本

    var  tag=document.getElementsByTagName('body')[0]; function findChild(tag){ var child=tag.childNodes ...

  8. 分享几篇文章（PDF版）

    后天就要回老家了,除了团团年估计也没有其他好玩的,就琢磨下点经典文章带回去看看. Google一番找到了老赵很早以前的文章: http://www.cnblogs.com/JeffreyZhao/ar ...

  9. node安装升级npm

    安装npm npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作 在开发过程往往会需要用到其他的包,使用n ...

  10. css 选择器中的正则表达式

    正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表 ...