用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. ifconfig 命令,改变主机名,改DNS hosts、关闭selinux firewalld netfilter 、防火墙iptables规则

    ifconfig 命令用于查看网络相关的命令: 安装:yum install net-tools -y  ifdown  eth_name  关闭网卡  ifup  eth_name   开启网卡 配 ...

  2. 08 正则表达式，Math类，Random，System类，BigInteger，BigDecimal，Date，DateFormat，Calendar

    正则表达式:    是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. public class Demo2_Regex { public sta ...

  3. Go Example--通道同步

    package main import ( "fmt" "time" ) func main() { //缓存通道 done := make(chan bool ...

  4. 【HAOI2016】放旗子

    终于自己推出来一道题了quq然而时间有点久,考场上并不大丈夫……原题: 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在这个矩阵上放N枚棋子(障碍 ...

  5. 使用Intellij IDEA新建Web项目

    在学习Servlet的过程中,发现大多数的教程都是使用MyEclipse或者Eclipse来创建Web项目,这让一直使用高逼格的LZ很是不爽,于是自己配置了一下使用Intellij IDEA新建了We ...

  6. memsql kafka集成

    memsql 可以加载s3,文件系统,kafka.hdfs 系统的数据,测试使用kafka 环境使用 docker-compose 运行,新版本的需要申请license,参考链接: https://w ...

  7. #pragma Directive in C/C++

    The #pragma is complier specified. for example, the code below does not work in gcc. #pragma startup ...

  8. AspNetCore+Swagger 生成Model描述

    AspNetCore+Swagger 生成Model 描述 前言: 本篇文章实现是基于上一篇文章,进下补充:多余的就不多说了,只是为了实现Model的描述生成:有兴趣的可以结合上一篇的进行实现:如有更 ...

  9. java 实现websocket的三种方式

    Java中实现websocket常见有以下三种方式: 使用tomcat的websocket实现,需要tomcat 7.x,JEE7的支持. 使用spring的websocket,spring与webs ...

  10. webpack 提取 manifest 文件

    当 webpack 生成 bundle 时, 它同时维护一个 manifest 文件.你可以在生成的 vendor bundle 中找到它.manifest 文件描述了哪些文件需要 webpack 加 ...