利用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万

任务

大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示:

选项卡标题使用ul..li

选项卡内容使用div

二、CSS样式制作

提示:

整个选项卡的样式设置

选项卡标题的样式设置

选项卡内容的样式设置

一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:

获取选项卡标题和选项卡内容

选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配

通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

    /* CSS样式制作 */

    *body {

        margin: 0;

        padding: 0;

    }

    ul,

    li {

        list-style-type: none;

    }

    #newstitle ul {

        overflow: hidden;

        margin-bottom: 0px;

        padding-left: 25px;

    }

    #newstitle ul li {

        float: left;

        width: 95px;

        height: 30px;

        line-height: 30px;

        text-align: center;

        border-left: 1px solid #5a5757;

        border-top: 1px solid #5a5757;

        border-right: 1px solid #5a5757;

        margin-right: 5px;

        border-radius: 3px 3px 0px 0px;

    }

    #newstitle ul li:hover {

        cursor: pointer;

    }

    #newstitle ul .active{

        border-top:2px solid #541e1e;

        border-bottom:2px solid #e1dddd;

        background-color:#e1dddd;

    }

    #newsdetails {

        width: 350px;

        height: 150px;

        overflow: hidden;

        margin-top: -2px;

    }

    #newsdetails ul {

        padding-top: 10px;

        padding-bottom: 10px;

        margin-top: 0px;

        background-color:#e1dddd;

        border-top: 2px solid #541e1e;

    }

    #newsdetails ul li a {

        text-decoration: none;

        color: #000;

        display: block;

        height: 30px;

        line-height: 30px;

    }

    #newsdetails ul li a:hover{

        text-decoration: underline;

    }

    .show{

        display:block;

    }

    .hide{

        display:none;

    }

    </style>

    <script type="text/javascript">

    // JS实现选项卡切换

    window.onload=function(){                                  //页面加载时调用函数

        var newst = document.getElementById("newstitle");      //通过id获取新闻分类区域

        var tlist = newst.getElementsByTagName("li");          //获取新闻分类标题标li签

        var newsd = document.getElementById("newsdetails");    //通过id获取新闻列表区域

        var dul = newsd.getElementsByTagName("ul");            //获取新闻列表板块ul

        for(var i=0;i<tlist.length;i++){                       //遍历新闻分类标题li

            tlist[i].index=i;                                  //在循环的过程中绑定下标i(0 1 2)到tlist数组相应元素tlist[0] tlist[1] tlist[2]的index变量上

            tlist[i].onmouseover=function(){                   //对新闻分类标题设置鼠标经过事件

                for(var i=0;i<tlist.length;i++){               //历新闻分类标题li

                    tlist[i].className = "";                   //消除新闻分类标题li后添加的类

                }

                this.className="active";                       //将鼠标当前经过的元素的类名设置为active

                for(var j=0;j<dul.length;j++){                 //遍历新闻列表板块

                    dul[j].className="hide";                   //将新闻列表板块的类设置为隐藏

                }

                dul[this.index].className="show";              //将对应鼠标经过的新闻分类的板块的类设置为显示

            }

        }

    }

    </script>

</head>

<body>

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

    <div id="newstitle">

        <ul>

            <li class="active">房 产</li>

            <li>家 居</li>

            <li>二手房</li>

        </ul>

    </div>

    <div id="newsdetails">

        <ul>

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

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

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

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

        </ul>

        <ul>

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

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

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

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

        </ul>

        <ul>

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

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

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

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

        </ul>

    </div>

</body>

</html>

二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

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

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

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象

    1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应

    1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...

  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--流程控制语句

    1.if语句--做判断 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位, ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--数组

    1.什么事数组 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦.我们用 ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象

    1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--函数

    1.什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(s ...

随机推荐

  1. [BZOJ1503][NOI2004]郁闷的出纳员

    [BZOJ1503][NOI2004]郁闷的出纳员 试题描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是 ...

  2. homework160809207刘兆轩

    # include <stdio.h> int main() { float a,b,c,m,n,l,k,j,i; printf("请输入三个数:\n"); scanf ...

  3. 正在使用广告标识符 (IDFA)

    APP提交审核后,apple方面一直说我使用了IDFA,APP里没有集合任何广告SDK. 怀疑是其他第三方的SDK用了. 检测命令 //在项目的根目录下用终端执行 grep -r advertisin ...

  4. linux文件远程传输客户端shell脚本与分布式客户机时间同步脚本

    #!/bin/bash # 将代码和脚本传送至worker节点 # 改变当前工作目录 cd ${AMAZONCRAWLER_HOME} #读取worker节点ip列表 i= while read li ...

  5. java对txt文件内容追加

    package com.test; import java.io.FileOutputStream; /** * 对txt文件在文本追加内容 * @author Wdnncey * */ public ...

  6. Ubuntu编译源码程序依赖查找方法

    ubuntu平时编译源码程序的时候会提示缺少相关的库或是头文件,可以按照以下两种方法进行查找,然后再安装相应的软件包. 1.使用apt-file查找头文件 安装apt-file sudo apt-ge ...

  7. python 的dict的update 方法的一点诡秘的行为

    如下: >>> 'a%s'%a 'a{1: 0, 2: 0}' >>> for k,v in a.items(): a.update(k=v) >>&g ...

  8. 如何优雅的使用 phpStorm 开发工具

    按照惯例依然是从百科上复制一条简介: PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具.PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化d ...

  9. python thread的join方法解释

    python的Thread类中提供了join()方法,使得一个线程可以等待另一个线程执行结束后再继续运行.这个方法还可以设定一个timeout参数,避免无休止的等待.因为两个线程顺序完成,看起来象一个 ...

  10. cas 单点登录出现org.jasig.cas.client.util.CommonUtils.getResponseFromServer - 拒绝连接 Connection refused

    cas 单点登录出现org.jasig.cas.client.util.CommonUtils.getResponseFromServer - 拒绝连接 Connection refused 环境: ...