[前端] html+css+javascript 实现选项卡切换效果

用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 实现选项卡切换效果的更多相关文章

用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
使用jquery实现选项卡切换效果
几张简陋的框架效果图页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
使用ViewPager+Fragment实现选项卡切换效果
实现效果本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果百度搜索 js 点击菜单项就可以切换内容的效果
前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

随机推荐

Eclipse实现数据库反向生成实体类（pojo）-------（插件安装和实现步骤的说明）
一.插件安装 1.下载插件: http://jaist.dl.sourceforge.net/sourceforge/jboss/HibernateTools-3.2.4.Beta1-R2008103 ...
LeetCode - Is Graph Bipartite?
Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...
【HAOI2014】遥感监测
独立博客被硬盘保护干掉了真不爽啊…… 原题: 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们目前对生命基本形式的认识.比如,我们所知的任何生命都离不开液态 ...
MySQL Transaction--TPS计算规则
TPS计算规则在MYSQL 中,TPS(Transaction Per Second)的计算方法为 (com_commit+com_rollback)/time,但com_commit和com_ro ...
MySQL--字符集参数
================================================== MySQL字符集相关参数 character_set_client: 表示客户端请求数据的字符集 ...
oracle-scn
在2012年第一季度的CPU补丁中,包含了一个关于SCN修正的重要变更,这个补丁提示,在异常情况下,Oracle的SCN可能出现异常增长,使得数据库的一切事务停止,由于SCN不能后退,所以数据库必须重 ...
利用express托管静态文件
通过express内置的express.static可以方便的托管静态文件,例如图片.css.javascript文件等. 将静态资源文件所在的目录作为参数传递给express.static中间件就可 ...
Array.asList()
package study.stage2;import java.util.*; /** * Created by Sandy.Liu on 2017/7/19. */public class Asl ...
KiCad 5.1.0 正式版终于发布
KiCad 5.1.0 正式版终于发布前几天看到 KiCad 5.1.0 在官方的测试文件夹中,过了三天正式发布了,看来没什么问题了. 据说比 5.0 快了很多. 以下为官方的新闻. KiCad 5 ...
python之路---04 列表元组
十七 .列表在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 1.列表存在索引和切片. 和字符串是一样的. 2.增删改查操作 1).增加 1. .append(&quo ...

[前端] html+css+javascript 实现选项卡切换效果

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

随机推荐

热门专题