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 条评论
登录 后参与评论

相关文章

来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

2028
来自专栏儿童编程

【动画原理续篇】Python Turtle动画不连续难题解决方案

前一段时间发过一篇小文“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例,在文末提出了一个疑问:画图的速度比较慢。即使speed()调到最大(sp...

4883
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9775
来自专栏cnblogs

Bootstrap源码分析之nav、collapse

导航分析(nav): 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertic...

3218
来自专栏mySoul

多媒体编程

由于要实现图片翻转,需要较高的响应度,此时需要进行缓存,new一个Image对象创建一个HTMLImageElement对象实例

1441
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

2856
来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

2312
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

2027
来自专栏Material Design组件

Human Interface Guidelines —— 工具栏(Toolbars)

38910
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

1302

扫码关注云+社区

领取腾讯云代金券