简单实用的TAB切换标签

最新推荐文章于 2023-08-08 09:41:16 发布

IT、木易

最新推荐文章于 2023-08-08 09:41:16 发布

阅读量1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_37212162/article/details/78471720

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

页面

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/s2.css" type="text/css">
</head>

<body>
<div id="box">
    <ul id="tab">
        <li id="bg1" class="active">HTML/CSS</li>
        <li >Javascript</li>
        <li >AJAX</li>
        <li>Sever Side</li>
    </ul>
    <div id="tab_list">
        <div class="on">
            <h1>HTML文本标记语言</h1>
        </div>
        <div>
            <h1>Javascript</h1>
        </div>
        <div>
            <h1>AJAX</h1>
        </div>
        <div>
            <h1>Sever Side</h1>
        </div>
    </div>
</div>
</body>
</html>

jq特效

<script src="../js/jquery-3.2.1.js" type="application/javascript"></script>
<script>
    //获取对象
//    添加点击事件
    $("ul li").click(function () {
        //获取样式表里的颜色
        var Color=$(this).css('background');
        //获取 默认选中的li并添加index属性，然后添加选中的class名，最后获取ul的所有的兄弟元素并添加移除class名
        $("ul li").eq($(this).index()).addClass("active").siblings().removeClass("active")
        //获取 默认选中的div并添加从默认选中样式表里获取背景颜色属性，并追加到div的背景颜色上，然后先让不选中的隐藏，选中的显示；
        $("#tab_list div").css('background',Color).hide().eq($(this).index()).show();
    })
</script>

样式

css：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#box{
    width: 495px;
    height: 250px;
    margin: 0 auto;
    margin-top:100px;
}
#tab{
    width: 495px;
    height: 40px;
}
#tab li:first-child{
    margin-bottom: 0px;
}
#tab li:last-child{
    margin-right: -5px;
    width: 125px;
    background: #a9c195;
}

#tab li{
    width: 120px;
    margin-right: 5px;
    float: left;
    line-height: 40px;
    color: #fff;
    text-align: center;
}
#tab .active{
    background: #5eb1df;
    width: 120px;
    height: 45px;
    color: #fff;
    font-weight:bolder;
}
#tab_list{
    margin-top: 5px;
    width: 500px;
    height: 200px;
}
#tab_list div{
    width: 500px;
    height: 200px;
    background: #5eb1df;
    display: none;
    color: #fff;
}
#tab_list div h1{
    margin-top:25px;
    float: left;
    font-size: 24px;
    font-weight: bolder;
    margin-left:22px;
}
#tab_list div p{
    margin-top: 1px;
    font-size:12px;
}
#tab_list .on{
    display: block;
    background: #5eb1df;
}

#bg1{
    background: #5eb1df;
}
#bg2{
    background: #87cbd7;
}
#bg3{
    background: #e9bbb3;
}