用html+css+js实现选项卡切换效果
使用之前学过的综合知识，实现一个新闻门户网站上的常见选项卡效果：

文字素材:
房产：
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，然后再加载样式，最后用JS修改相应的DOM，达到更改选项卡和内容的目的。

一、HTML页面布局
HTML显示的是所有与文字有关的信息，所以在这个页面中与文字有关的信息为上面选项卡的三个标题，以及选项卡的内容。
于是决定标题使用<ul> <li>布局，内容使用<div>布局。编写代码如下：

现在展示出来的样式是这样的：

CSS样式
要制作成上图所示的选项卡样式，几个地方需要注意：
1、整个选项卡的样式设置
2、选项卡标题的样式设置
3、选项卡内容的样式设置
4、只能显示一个选项卡的内容，其他选项卡内容隐藏。

写完以后，效果就出来啦。

JavaScript实现选项卡切换
1、首先需要获取选项卡标题和选项卡内容
2、选项卡内容有三个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。
3、通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

完整代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title> 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */

     *{padding:0px; margin:0px;}

      a{ text-decoration:none; color:black;}

      a:hover{text-decoration:none; color:#336699;}

       #tab{width:270px; padding:5px;height:150px;margin:20px;}

       #tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;}

       #tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;}

       #tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}

       #tab div{height:100px;width:250px; line-height:24px;border-top:none;  padding:1px; border:1px solid #336699;padding:10px;}

       .hide{display:none;}

    </style>

    <script type="text/javascript">

    // JS实现选项卡切换

    window.onload = function(){

    var myTab = document.getElementById("tab");    //整个div

    var myUl = myTab.getElementsByTagName("ul")[0];//一个节点

    var myLi = myUl.getElementsByTagName("li");    //数组

    var myDiv = myTab.getElementsByTagName("div"); //数组

    for(var i = 0; i<myLi.length;i++){

        myLi[i].index = i;

        myLi[i].onclick = function(){

            for(var j = 0; j < myLi.length; j++){

                myLi[j].className="off";

                myDiv[j].className = "hide";

            }

            this.className = "on";

            myDiv[this.index].className = "show";

        }

      }

    }

    </script>

</head>

<body>

<!-- HTML页面布局 -->

<div id = "tab">

        <ul>

        <li class="off">房产</li>

        <li class="on">家居</li>

        <li class="off">二手房</li>

        </ul>

    <div id="firstPage" class="hide">

            <a href = "#">275万购昌平邻铁三居 总价20万买一居</a><br/>

            <a href = "#">200万内购五环三居 140万安家东三环</a><br/>

            <a href = "#">北京首现零首付楼盘 53万购东5环50平</a><br/>

            <a href = "#">京楼盘直降5000 中信府 公园楼王现房</a><br/>

    </div>

    <div id="secondPage" class="show">

            <a href = "#">40平出租屋大改造 美少女的混搭小窝</a><br/>

            <a href = "#">经典清新简欧爱家 90平老房焕发新生</a><br/>

            <a href = "#">新中式的酷色温情 66平撞色活泼家居</a><br/>

            <a href = "#">瓷砖就像选好老婆 卫生间烟道的设计</a><br/>

    </div>

    <div id="thirdPage" class = "hide">

            <a href = "#">通州豪华3居260万 二环稀缺2居250w甩</a><br/>

            <a href = "#">西3环通透2居290万 130万2居限量抢购</a><br/>

            <a href = "#">黄城根小学学区仅260万 121平70万抛!</a><br/>

            <a href = "#">独家别墅280万 苏州桥2居优惠价248万</a><br/>

    </div>

</div>

</body>

</html>

---------------------
作者：童凌
来源：CSDN
原文：https://blog.csdn.net/tlonline/article/details/50995865
版权声明：本文为博主原创文章，转载请附上博文链接！

[前端] html+css+javascript 实现选项卡切换效果的更多相关文章

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

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

  2. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  3. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  4. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  5. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  6. 纯CSS实现tab选项卡切换

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

  7. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  8. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  9. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

随机推荐

  1. Beta周第7次Scrum会议(11/16)【王者荣耀交流协会】

    一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/16 17:03~17:17,总计14min. ...

  2. MySQL--字符集基础

    ========================================================================= 字符集和编码规则 字符集:特定类型或用途的字符集合, ...

  3. Singer 学习六 运行&&开发taps、targets (一 taps 运行说明)

    文章内容来来自官方github 说明: singer大部分的taps && targets 是用python编写的,所以内容里面的代码也是使用python 编写 使用python运行s ...

  4. 数学与猜想 合情推理模式 (G. 波利亚 著)

    第十二章 几个著名模式 (已看) $1. 证实一个结论 $2. 连续证实几个结论 $3. 证实一个未必可信的结论 $4. 类比推理 $5. 加深类比 $6. 被隐没的类比推理 第十三章 更多的模式与最 ...

  5. LoadRunner 压测场景制定以及报告分析

    这里,我们利用 LoadRunner 来制定场景,且以测试 tps 值为导向,主要介绍手工场景 单服务器的业务请求处理能力 tps 值在 10~200 是合理的:如果是访问单接口不走关系型数据库的,访 ...

  6. day28 1.缓冲区 2.subprocess 3.黏包现象 4.黏包现象解决方案 5.struct

    1.缓冲区: 输入缓冲区  输出缓冲区 2. subprocess的使用import subprocess sub_obj = subprocess.Popen('ls', #系统指令shell=Tr ...

  7. ML（5）——神经网络1（神经元模型与激活函数）

    上一章介绍了使用逻辑回归处理分类问题.尽管逻辑回归是个非常好用的模型,但是在处理非线性问题时仍然显得力不从心,下图就是一个例子: 线性模型已经无法很好地拟合上面的样本,所以选择了更复杂的模型,得到了复 ...

  8. koa 学习资料

    koa 学习资料 学习资料 地址 koa 中文版 https://koa.bootcss.com/

  9. GoJS 在 vue 项目中的使用

    GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...

  10. CF 666E Forensic Examination——广义后缀自动机+线段树合并

    题目:http://codeforces.com/contest/666/problem/E 对模式串建广义后缀自动机,询问的时候把询问子串对应到广义后缀自动机的节点上,就处理了“区间”询问. 还要处 ...