利用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. 随笔之——各大热门网站search 搜索框的写法，浅析！

    随笔之——各大热门网站search 搜索框的写法,浅析!   关于搜索框,写法有很多种,搜索框这一块是一个比较细的活,要先计算好他的高.宽: 下面我就以京东搜索框为例,给大家浅析一下. 上面就是最终s ...

  2. ios工程中加入.c/.cpp文件

    如果你在工程里拉入.c/.cpp文件就会导致工程报错, 现在有两种解决方式 1. 把.c文件的后缀全部改成.m的后缀 把.cpp文件的后缀改成.mm的后缀 2. 使用 工程名-Prefix.pch 并 ...

  3. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

  4. ZUI前段框架简介

    一.说明 基于Bootstrap定制 ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的,一些组件都进行了定制和修改.这些变化包括: 移除了部分插件的限制,增加 ...

  5. CLR via C# 随记

    使用C# 编译器的方法: 1.csc.exe位于C:\Windows\Microsoft.NET\Framework\vxxxxx下面,将对应版本的路径配置到环境变量path中,如将";C: ...

  6. 【leetcode】Regular Expression Matching

    Regular Expression Matching Implement regular expression matching with support for '.' and '*'. '.' ...

  7. java map的四种遍历

    四种遍历: public static void main(String[] args) { Map<String, String> map = new HashMap<String ...

  8. android studio从1.5更新到2.0后terminal无法运行gradle命令，提示无法找到gradle命令

    android studio从1.5更新到2.0后terminal无法运行gradle命令,提示无法找到gradle命令. 'gradle' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 设 ...

  9. iOS cannot find folder xcdatamodeld Xcode 7

    今天升级xcode7时发现了个这个编译bug,说是找不到xcdatamodeld. 解决方法如下: I had the same problem. Here are the steps I used ...

  10. ios iphone6 Plus 的适配问题

    最近更新一个老程序,发现在iphone6 plus上用nslog打印出的screen 的frame还是320*568, 不是414*736, 查了一下,原来需要设置iphone6 plus的启动画面才 ...