通过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. ZOJ2314 Reactor Cooling（无源汇流量有上下界网络的可行流）

    题目大概说一个核反应堆的冷却系统有n个结点,有m条单向的管子连接它们,管子内流量有上下界的要求,问能否使液体在整个系统中循环流动. 本质上就是求一个无源汇流量有上下界的容量网络的可行流,因为无源汇的容 ...

  2. 51nod 1165 整边直角三角形的数量

    1165 整边直角三角形的数量 直角三角形,三条边的长度都是整数.给出周长N,求符合条件的三角形数量. 例如:N = 120,共有3种不同的满足条件的直角3角行.分别是:{20,48,52}, {24 ...

  3. Repeatless Numbers[POJ2956]

    Repeatless Numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1719   Accepted: 726 ...

  4. PNG无损压缩工具Optipng【备忘】

    Optipng 是专门的 PNG 图像优化工具. 支持WINODWS.LINUX 地址:http://optipng.sourceforge.net/ 另:jpegoptim 优化 jpeg 图片 地 ...

  5. fork和execve

    fork函数在新的子进程中运行相同的程序,新的子进程是父进程的一个复制品. execve函数在当前进程的上下文中加载并运行一个新的程序.它会覆盖当前进程的地址空间,但并没有创建一个新的进程.新的程序仍 ...

  6. 【wikioi】1002 搭桥（dfs+最小生成树）

    http://wikioi.com/problem/1002/ 今天开始又开始刷水了哈T_T.照着hzwer神犇的刷题记录刷!!! 题解: 一开始我也不会,但是我想到了直接爆搜T_T. 好吧,题解. ...

  7. PHP Execute Command Bypass Disable_functions

    先简单说一下php调用mail()函数的过程. 看到源码ext/mail.c 236行: char *sendmail_path = INI_STR("sendmail_path" ...

  8. php中的正则表达式具体的说明案例

    让我们看看两个非凡的字符:'^' 和 '$' 他们是分别用来匹配字符串的开始和结束,一下分别举例说明: "^The": 匹配以 "The"开头的字符串; &qu ...

  9. ADO.NET对象之 DataTable

    ADO.NET可以在与数据库断开连接的方式下通过DataSet或DataTable对象进行数据处理,当需要更新数据时才重新与数据源进行连接,并更新数据源. DataTable对象表示保存在本机内存中的 ...

  10. jquery CDN(内容分发网络)使用

    jquery CDN 给开发者提供一种捷径,即不下载jquary 就通过CDN能使用各个版本的jquery. 使用方法很简单,就是在HTML 文档中引用相关版本的jquery. 例如:我用百度的CDN ...