利用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. 【Android面试】Android面试题集锦 (陆续更新)（最新2012-6-18） eoe上看到的

    ===============eoeAndroid社区推荐:======================= 1.Android开发新浪面试题[开发者必看哦]下载地址 http://www.eoeand ...

  2. View和ViewImage设置图片

    1.view类的设置背景android:background --setBackgroundResource(int) --A drawable to use as the background. s ...

  3. 学习Node.js笔记（一）

    一.什么是Node.js 1.1.Node.js是什么 Node.js是用来编写高性能网络服务器的JavaScript工具包 Node.js 是一个基于Chrome JavaScript 运行时建立的 ...

  4. MySQL分配角色权限

    1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost identified by &quo ...

  5. C# 属性和索引

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

  6. flask 链接 url_for()

    通常html的文件都放在template里面,那么静态的文件放在哪呢?staitc里面 调用 url_for('static', filename='css/styles.css', _externa ...

  7. Aufs与Devicemapper的关系

    Aufs与Devicemapper的应用 Aufs是Docker最初采用的文件系统,由于Aufs未能加入到Linux内核,考虑到兼容性问题,加入了Devicemapper的支持.目前,除少数版本如Ub ...

  8. 【GoLang】panic defer recover 深入理解

    唉,只能说C程序员可以接受go的错误设计,相比java来说这个设计真的很差劲! 我认为知乎上说的比较中肯的: 1. The key lesson, however, is that errors ar ...

  9. 【leetcode】Unique Binary Search Trees

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  10. ios 后台播放音乐1条注意事项

    除了设置程序的后台模式,还需要几行代码 AVAudioSession *session = [AVAudioSession sharedInstance]; [session setCategory: ...