用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. 【HDOJ1051】【排序+LIS】【贪心】

    http://acm.hdu.edu.cn/showproblem.php?pid=1051 Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)  ...

  2. 【usaco 2006 feb gold】 牛棚安排

    终于自己独立做出来一道题QAQ然而本校数据实在太水不能确定我是不是写对了... 原题: Farmer John的N(1<=N<=1000)头奶牛分别居住在农场所拥有的B(1<=B&l ...

  3. 芯灵思SinlinxA33开发板Linux内核定时器编程

    开发平台 * 芯灵思SinlinxA33开发板 淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 QQ:641395230 Linux 内核定时器是内核 ...

  4. centos7设置grub密码保护

    设置grub密码保护:查看grub登录用户名cat /etc/grub.d/01_users,可以看到用户名为root.通过grub2-setpasswords设置grub密码,确认密码 cat /b ...

  5. PostgreSQL Q&A: Building an Enterprise-Grade PostgreSQL Setup Using Open Source Tools

    转自:https://www.percona.com/blog/2018/10/19/postgresql-building-enterprise-grade-setup-with-open-sour ...

  6. java自学总结

    经过了一段时间的java学习,感觉自己在编程方面还只是一个初学者,感觉学会了c,在学c++的时候就是以c为基础,java应该也是以c或者c++为基础,但是并非如此,java和c++虽然有一些相似之处, ...

  7. CSS背景渐变支持transition过渡效果

    background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...

  8. Flume 多个agent串联

    多个agent串联 采集需求:比如业务系统使用log4j生成的日志,日志内容不断增加,需要把追加到日志文件中的数据实时采集到hdfs,使用agent串联 根据需求,首先定义以下3大要素 第一台flum ...

  9. Maven install报MojoFailureException

    [ERROR] 位置: 类 com.spark.test.JavaDirectKafkaWordCount [ERROR] /I:/TrueTimeControlOnSparkByJava/src/m ...

  10. Linux内核移植到JZ2440

    一.准备工作:1.Linux内核:Linux2.6.22.6,可从www.kernel.org上下载:2.交叉工具编译链:arm-linux-gcc-3.4.5-glibc-2.3.6:3.yaffs ...