利用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. Unity手游之路<七>角色控制器

    Unity手游之路<七>角色控制器 我们要控制角色的移动,可以全部细节都由自己来实现.控制角色模型的移动,同时移动摄影机,改变视角.当然Unity也提供了一些组件,可以让我们做更少的工作, ...

  2. linux下一步一步安装禅道项目管理工具

    linux下一步一步安装禅道项目管理工具 因为禅道官网的安装教程实在是太简陋了,所以记录在此. 1.安装apache服务 archlinux下直接 sudo pacman -S apache ubun ...

  3. Apache 配置参考

    1．什么是Apache ? Apache,是一种开放源码的HTTP服务器,可以在大多数操作系统中运行,由于其多平台和安全性所以被广泛使用,是目前最流行的Web服务器软件之一.Apache 起初由 Il ...

  4. 在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作

    Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...

  5. jQuery FileUpload等插件的使用实例

    1.jQuery FileUpload 需要的js: jquery.js jquery.fileupload.js jquery.iframe-transport.js jquery.xdr-tran ...

  6. sql语句操作

    1.1 SQL语句 1.1.1 什么是SQL SQL:Structured Query Language, 结构化查询语言. 特点: * 非过程性语言: * 过程性语言特点:一个语句需要依赖上面的几条 ...

  7. NGUI 不写一行代码实现翻拍效果

    正面UI添加一个TweenRotation组件,取消掉Active状态 ,To参数改成0,90,0) 背面UI添加一个TweenRotation组件,取消掉Active状态, From参数改成0,27 ...

  8. percona-toolkit 之 【pt-heartbeat】说明

    背景: MySQL的架构中,Master-Slave是目前最受欢迎的,用的也最多,但是对于主从的延迟一般都是按照他自己的状态[Seconds_Behind_Master]来查看的,最近看了[不要用该值 ...

  9. Java Thread.join()方法

    一.使用方式. join是Thread类的一个方法,启动线程后直接调用,例如: Thread t = new AThread(); t.start(); t.join(); 二.为什么要用join() ...

  10. Java for LeetCode 215 Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...