通过JavaScript实现如上选项卡切换的效果。

实现思路：

一、HTML页面布局

选项卡标题使用ul..li
选项卡内容使用div

二、CSS样式制作

整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏

<!--代码一--><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /*
     标签和文本结合区域效果制作：
     1.用ul做分类标签
     2.把ul的display定义为block使ul区域和下面div区域结合在一起
     3.给ul定义一个下边框或者给div内容区域定义一个上边框
     4.所有li标签默认样式不设下边框，作为激活显示的li标签加宽其#fff（白色）
     区域的下边框，覆盖。
     */
*{
    margin:0px; padding:0px; font:12px normal; font-family:微软雅黑;
    }
 #tabs{
     width:290px; height:150px; padding:5px; margin:20px;
 }
 #tabs ul{
     list-style:none; display:block; height:30px; line-height:30px;
 }
 #tabs ul li{
     float:left; width:60px; height:28px; line-height:28px; text-align:center;
     display:inline-block;margin:0px 3px; border:1px solid #aaa;border-bottom:none;
     cursor:pointer; background:#fff; list-style:none;
 }
 #tabs ul li.on{
     border-top:2px solid blue; border-bottom:2px solid white;
 }
 #tabs div{
     height:120px; line-height:25px; border:1px solid #336699;border-top:2px solid blue;padding:5px;
 }
 .hide{display:none;}
    </style>
    <script type="text/javascript">     

    window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var div = oTab.getElementsByTagName("div");
        //oTabs.get...为了定义className作用对象为id为tabs下的所有文本div

        for(var i=0;i<li.length;i++){       //获取所有i编号的元素
            li[i].index = i;                //定义一个index属性对li进行编号
            li[i].onmouseover = function(){ //注册一个点击事件，鼠标移过所有标签恢复最初状态
            for(var n=0;n<li.length;n++){   //对所有li标签设置类名（对应样式）
                li[n].className = "";
                div[n].className = "hide";
            }
            //设置选中标签的类名改变其样式
            this.className = "on";          //对鼠标焦点处的li标签设置类名（覆盖前面设置过的样式）
            //设置选中标签下对应的div内容的类名来改变样式
            div[this.index].className = ""; //通过之前的index编号绑定的指定div（重新设置属性）
            }
        }
    }

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul>
        <li class="on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
    275万购昌平邻铁三居 总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div class="hide">
     40平出租屋大改造 美少女的混搭小窝<br>
     经典清新简欧爱家 90平老房焕发新生<br>
     新中式的酷色温情 66平撞色活泼家居<br>
     瓷砖就像选好老婆 卫生间烟道的设计<br>
    </div>
    <div class="hide">
     通州豪华3居260万 二环稀缺2居250w甩<br>
     西3环通透2居290万 130万2居限量抢购<br>
     黄城根小学学区仅260万 121平70万抛!<br>
     独家别墅280万 苏州桥2居优惠价248万<br>
    </div>
</div>
</body>
</html>

<!--代码二--><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
     *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}

     #tab-list{width: 275px;height:190px;margin: 20px auto;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li:hover{cursor: pointer;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

     .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript">

    window.onload = function() {
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }
        }
    }

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li><li>家居</li><li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>
</body>
</html>

来源：慕课网课程练习：http://www.imooc.com/code/1912

js实现选项卡的更多相关文章

  1. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  2. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  3. js实现选项卡切换

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  5. js原生选项卡（包含无缝滚动轮播图）一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  6. Jquery&JS简单选项卡

    结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一:  ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...

  7. JS原生选项卡 – 幻灯片效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  8. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  9. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

随机推荐

  1. BZOJ3776 : 警察局

    怎么3776又换题目了…换题目了…题目了…目了…了… SCC缩点后只有入度或者出度为0的点必须要放警察局 假设一共有t-1个入度或者出度为0的SCC q[1]-q[t-1]表示这些SCC中点的个数 q ...

  2. POJ 2763 (树链剖分+边修改+边查询）

    题目链接:http://poj.org/problem?id=2763 题目大意:某人初始在s点.有q次移动,每次移动沿着树上一条链,每经过一条边有一定花费,这个花费可以任意修改.问每次移动的花费. ...

  3. Chromium的UI绘制初探

    转载请注明出处:http://www.cnblogs.com/fangkm/p/3943896.html 常见的UI库的绘制逻辑 任何一个成熟的界面框架都有一个相当复杂的结构,消息循环的处理.控件的布 ...

  4. YUV YCbCr

    一,介绍 YUV是一种颜色空间 其中“Y”表示明亮度(Luminance或Luma),也就是灰阶值: 而“U”和“V” 表示的则是色度(Chrominance或Chroma),作用是描述影像色彩及饱和 ...

  5. CentOS6.5的openssl升级

    CentOS6.5的openssl升级:(修复心脏漏血漏洞) [root@linux1 ~]# rpm -qi openssl|grep VersionVersion : 1.0.1e Vendor: ...

  6. [百科] - SIP（会话发起协议）

    SIP(会话发起协议)SIP是类似于HTTP的基于文本的协议.SIP可以减少应用特别是高级应用的开发时间.由于基于IP协议的SIP利用了IP网络,固定网运营商也会逐渐认识到SIP技术对于他们的深远意义 ...

  7. windows实时操作系统

    最近一个项目需要用windows进行实时定时操作以实现同步功能(12ms),不过由于windows是分时系统,其可供用户使用的定时器误差较大. 通过查找发现了一个ardence公司开发的一个叫做RTX ...

  8. Java实战equals()与hashCode()

    一.equals()方法详解 equals()方法在object类中定义如下: 代码 public boolean equals(Object obj) { return (this == obj); ...

  9. SAE saestorage.class.php文件的封装代码

    Source for file saestorage.class.php Documentation is available at saestorage.class.php <?php /** ...

  10. JS采用正则表达式简单获取URL地址栏参数

    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=( ...