专栏首页跟牛老师一起学WEBGISCSS+JS实现tab标签切换

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果:

我主要实现了:

1、tab之间的相互切换;

2、显示选中的tab

下面看看实现代码:

css:

html,body,div{
    font-size: 12px;
    font-family:"Arial";
}
.tab-ui{
    width: 400px;
    height: 300px;
    position: relative;
}
.tab-title{
    border-top-right-radius:8px;
    float: left;
    border: solid 1px #7EABCD;
    background: #c5dbec;
    padding: 5px;
    font-weight: bold;
    color: #ffffff;
    margin: 1px;
}
.tab-title:hover{
    cursor: pointer;
}
.tab-title-active{
    background: #7EABCD;
}
.content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 27px;
    left: 1px;
}
.tab-content{

    padding: 10px;
    border: solid 1px #c5dbec;
}

js:

function show(total,active){
    for(var i=1;i<total+1;i++){
        $("#tab"+i).removeClass("tab-title-active");
        $("#content"+i).hide();
    }
    $("#tab"+active).addClass("tab-title-active");
    $("#content"+active).show();
}

html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TAB切换标签</title>
    <link rel="stylesheet" href="tabtest.css">
    <script src="../jquery-1.8.3.js"></script>
    <script src="tabtest.js"></script>
</head>
<body>
<div class="tab-ui">
    <div class="tab">
        <div class="tab-title tab-title-active" id="tab1" onclick="show(3,1)">
            <a>法家简介</a>
        </div>
        <div class="tab-title" id="tab2" onclick="show(3,2)">
            <a>墨家简介</a>
        </div>
        <div class="tab-title" id="tab3" onclick="show(3,3)">
            <a>道家简介</a>
        </div>
    </div>
    <div class="content">
        <div class="tab-content" id="content1">
            法家,代表人物韩非、李斯、管仲、商鞅,代表作《韩非子》、《管子》。
        </div>
        <div class="tab-content" id="content2" style="display: none;">
            墨家,代表人物墨翟,代表作《墨子》。
        </div>
        <div class="tab-content" id="content3" style="display: none;">
            道家,代表人物李耳、庄周,代表作《老子》、《庄子》。
        </div>
    </div>
</div>
</body>
</html>

实现思路:

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

如有疑问,请联系:

QQ:1004740957

Email:niujp08@qq.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路,希望对大家有用。先贴效果吧:

    lzugis
  • CSS+JS实现图片集展示

    翻页是通过updateImage这个函数实现的,传递参数为type,判断操作时“上一张”还是“下一张”,updateImage函数如下:

    lzugis
  • aceEditor实现类似于codepen的效果

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    lzugis
  • [代码片段]谷歌的一个不错的CSS样式,不得不说大厂的前端设计师美感就是好。

    我本来以为这个彩色的边框是个背景图片,看了一下源码竟然是个background样式,看来我学识还是太浅。

    紫旭Blog - blog.zixutech.cn
  • jquery 选中某一行

    Dream城堡
  • 3种纯CSS方式实现Tab 切换

    Tab 切换是种很常见的网页呈现形式,不管是PC或者H5都会经常看到,今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式,同时对比一下那种代码更方便,更通...

    Javanx
  • 前端网页设计(不忘初心,继续前行,共筑中国梦精美成品)

    泰斗贤若如
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo

扫码关注云+社区

领取腾讯云代金券