首页 > 代码库 > CSS+JS实现tab标签切换

CSS+JS实现tab标签切换

2024-08-10 02:50:09   212人阅读

实现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=http://www.mamicode.com/"tabtest.css">>
实现思路：
循环将所有的内容标签隐藏，并将tab标题栏的active样式清除，完了之后设置选中标签的内容显示，并给tab标题栏添加active样式。

如有疑问，请联系：
QQ：1004740957
Email：niujp08@qq.com
CSS+JS实现tab标签切换


联系
我们