利用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. cocos2dx中CC_CALLBACK_1等宏中this指针实际指向

    首先看代码,我在Helloworld中添加两个函数. void HelloWorld::addTarget(){ Size visibleSize = Director::getInstance()- ...

  2. BZOJ2843——极地旅行社

    1.题目大意:动态树问题,点修改,链查询.另外说明双倍经验题=bzoj1180 2.分析:lct模板题,练手的 #include <stack> #include <cstdio&g ...

  3. C++输入输出流

    一.C++输入输出流的含义 以前所用到的输入和输出,都是以终端为对象的,即从键盘输入数据,运行结果输出到显示器屏幕上.从操作系统的角度看,每一个与主机相连的输入输出设备都被看作一个文件.程序的输入指的 ...

  4. Android学习笔记（三）——初探Intent

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! Intent 是 Android 程序中各组件之间进行交互的一种重要方式,它不仅可以指明当前组件想要执行的动作 ...

  5. 剑指Offer 二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示.   思路: 如果一个整数不为0,那么这个整数至少有一位是1.如果我们把这个整数减1,那么原来处在整数最右边的1就会变为0,原 ...

  6. C# 属性和索引

    //用索引取一个记录中的各项 using system; class IndexerRecord{ private string[] data= new string [6]; private str ...

  7. 33 网络相关函数(一)——live555源码阅读(四)网络

    33 网络相关函数(一)——live555源码阅读(四)网络 33 网络相关函数(一)——live555源码阅读(四)网络 简介 1)IsMulticastAddress多播(组播)地址判断函数 多播 ...

  8. 浅谈python的import

    动态加载模块: 使用__import__ c=__import__('sys') 等价于 import sys 不过前者可以在执行时决定. 静态加载: 也就是常规的import from xxx im ...

  9. ndk学习17: jni之Java调用C&C++

    一.Hello World 1. 定义函数原型 native关键字定义的函数即为jni函数 2.生成头文件 切换到src目录执行: (这个过程可以写脚本自动完成,比如自动拷贝到jni目录) javah ...

  10. string转DateTime（时间格式转换）

    1.不知道为什么时间在数据库用varchar(8)来保存,例如"19900505",但是这样的保存格式在处理时间的时候是非常不方便的. 但是转换不能用Convert.ToDateT ...