通过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. sqlserver linkserver

    --创建链接服务器exec sp_addlinkedserver    'srv_lnk','','SQLOLEDB','远程服务器名或ip地址'exec sp_addlinkedsrvlogin ' ...

  2. web farm 讨论引出

    关于web farm 有成功的实施的文档没 用它还不如 用nginx,简单易用. Nginx for windows的运行效果咋样 windows  iis无敌 玩nginx就不要用win系统,必须l ...

  3. 【TYVJ】1982 武器分配（费用流）

    http://tyvj.cn/Problem_Show.aspx?id=1982 一眼题.. 源向每个人连容量为1,费用为0的边. 每个人向一个中转节点na连容量1,费用0的边(你也可以不连,直接连后 ...

  4. BZOJ3238: [Ahoi2013]差异 （后缀自动机）

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  5. Stack and Heap 堆和栈的区别

    在和计算机内存打交道时,我们一定会碰到堆和栈,这两个东西很容易搞混,那么现在就来梳理一下二者的关系. 栈是用来静态分配内存的而堆是动态分配内存的,它们都是存在于计算机内存之中. 栈的分配是在程序编译的 ...

  6. Shortcut 常用快捷键

    多行注释: VS2010:   / NotePad++: Ctrl Q Xcode:    CMMND / 回到光标所在之前位置 VS2010: Ctrl +/- 关闭当前页: VS2010: 鼠标中 ...

  7. spark-submit [options]

    执行时需要传入的参数说明如下: Usage: spark-submit [options] <app jar | python file> [app options] 参数名称 含义 -- ...

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

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

  9. 字符串中的一些基本操作函数（c语言）

    其中很多函数返回的都是首地址,程序中只是将该地址后的内容全部输出来了...并没有作特殊处理输出地址...还有几个函数有点小bug. #include"iostream" #incl ...

  10. [转]C#将image中的显示的图片转换成二进制

    本文转自:http://www.cnblogs.com/shuang121/archive/2012/07/09/2582654.html .将Image图像文件存入到数据库中 我们知道数据库里的Im ...