简单选项卡的使用

是欢欢啊

于 2021-03-19 13:16:48 发布

阅读量72

点赞数

分类专栏： JS demo

本文链接：https://blog.csdn.net/bznhlhh/article/details/115004074

版权

JS demo 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡的简单使用</title>
</head>
<style>
    .container {   
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 800px;
        padding-top: 200px;
        cursor: pointer;
        user-select: none;
    }
    .container_cont {
        display: flex;
        justify-content: center;
        /* align-items: center; */
        width: 100%;
        margin-bottom: 100px;
    }
    .one,.two,.three {
        flex: 1;
        text-align: center;
        width: 0;
    }
    .boxb {
        width: 100% !important;
        height: 1px !important;
        color: red;
        background-color: red;
    }
    .text_two,.text_three {
        display: none;
    }
    .cur{
        color: red;
    }
    .box {
        width: 0;
    }
    .box_after {
        width: 100%;
        height: 1px;
        color: red;
        background-color: red;
        transition: all 1s;
    }
</style>
<body>
    <div class="container">
        <div class="container_cont">
            <div class="one">
                <p title="这是第一个选项卡">one</p>
                <div class="box boxb"></div>
            </div>
            <div class="two">
                <p title="这是第二个选项卡">two</p>
                <div class="box"></div>
            </div>
            <div class="three">
                <p title="这是第三个选项卡">three</p>
                <div class="box"></div>
            </div>
        </div>
        <div class="text_one">创建Html元素创建Html元素创建Html元素创建Html元素创建Html元素创建Html元素创建Html元素</div>
        <div class="text_two">设置css样式设置css样式设置css样式设置css样式设置css样式设置css样式设置css样式设置css样式</div>
        <div class="text_three">编写jquery代码编写jquery代码编写jquery代码编写jquery代码编写jquery代码编写jquery代码</div>
        

    </div>
</body>
</html>
<script src="./js/jquery.js"></script>
<script>
    $(".one").click(function(){
        $(".text_one").show();
        $(".text_two",).hide();
        $(".text_three").hide();
        $(".one div").addClass("box_after");
        $(".two div").removeClass("box_after");
        $(".three div").removeClass("box_after");
    })
    $(".two").click(function(){
        $(".text_two").show();
        $(".text_one").hide();
        $(".text_three").hide();
        $(".two div").addClass("box_after");
        $(".one div").removeClass("box_after");
        $(".three div").removeClass("box_after");
        $(".one .box").removeClass("boxb");
    })
    $(".three").click(function(){
        $(".text_three").show();
        $(".text_one").hide();
        $(".text_two").hide();
        $(".three div").addClass("box_after");
        $(".one div").removeClass("box_after");
        $(".two div").removeClass("box_after");
        $(".one .box").removeClass("boxb");
    })
</script>

是欢欢啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单选项卡的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡的简单使用</title></head><style> .container {
复制链接

扫一扫

专栏目录