HTML5+CSS3+JS小实例：简约的垂直选项卡

耀南.

已于 2024-01-18 17:31:33 修改

阅读量443

点赞数 10

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 css3 javascript

于 2023-12-26 17:54:16 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/135227939

版权

前端好玩炫酷的动画小案例专栏收录该内容

57 篇文章 8 订阅

订阅专栏

话不多说 Ctrl c v代码直接运行看效果既OK！！！💖💖💖

核心代码：

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>简约的垂直选项卡</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="/fonts/css/font-awesome.css">
    <link rel="stylesheet" href="yaonan.css">
</head>

<body>
    <div class="container">
        <div class="left-box">
            <ul>
                <li class="active">
                    <i class="fa fa-thumbs-o-up"></i>
                    点赞
                </li>
                <li>
                    <i class="fa fa-heart-o"></i>
                    关注
                </li>
                <li>
                    <i class="fa fa-star-o"></i>
                    收藏
                </li>
                <li>
                    <i class="fa fa-share-square-o"></i>
                    转发
                </li>
            </ul>
        </div>
        <div class="border">
            <div class="line line1"></div>
        </div>
        <div class="right-box">
            <div class="rb active">
                <i class="fa fa-thumbs-o-up"></i>
                <h1>我是标题</h1>
                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            </div>
            <div class="rb">
                <i class="fa fa-heart-o"></i>
                <h1>我是标题</h1>
                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            </div>
            <div class="rb">
                <i class="fa fa-star-o"></i>
                <h1>我是标题</h1>
                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            </div>
            <div class="rb">
                <i class="fa fa-share-square-o"></i>
                <h1>我是标题</h1>
                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
            </div>
        </div>
    </div>

    <script src="yaonan.js"></script>
</body>

</html>

css：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(to top,#e6e9f0,#eef1f5);
}
li{
    list-style: none;
}
.container{
    width: 900px;
    max-width: 100vw;
    height: 400px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
}
.left-box{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-box li{
    padding: 10px 0;
    line-height: 34px;
    color: #aaa;
    cursor: pointer;
    display: flex;
    /* 过渡效果 */
    transition: 0.2s ease-out;
}
.left-box .fa{
    font-size: 30px;
    margin-right: 15px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}
/* li选中态 */
.left-box li.active{
    color: #333;
}
.left-box li.active .fa{
    color: #e74c3c;
}
.border{
    height: 288px;
    width: 1px;
    background-color: #ddd;
}
.border .line{
    width: 6px;
    height: 54px;
    background-color: #e74c3c;
    margin-left: -2px;
    margin-top: 35px;
    transition: 0.4s ease-in-out;
}
/* 分别设置各个红色小块的垂直位置 */
.border .line1{
    margin-top: 35px;
}
.border .line2{
    margin-top: 89px;
}
.border .line3{
    margin-top: 143px;
}
.border .line4{
    margin-top: 197px;
}
.right-box{
    flex: 1;
    height: 100%;
    position: relative;
}
.right-box .rb{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #333;
    position: absolute;
    /* 默认隐藏 */
    top: -350px;
    opacity: 0;
    transition: 0.4s ease-in-out;
}
.right-box .fa{
    font-size: 64px;
}
.right-box h1{
    margin: 30px 0 40px 0;
}
.right-box p{
    padding: 0 30px;
}
/* 右侧内容区选中态 */
.right-box .rb.active{
    top: 0;
    opacity: 1;
}

js:

// 获取要操作的元素
let lis=document.querySelectorAll('li'),
    rbs=document.querySelectorAll('.rb'),
    line=document.querySelector('.line');

// 循环绑定li的点击事件，并设置选中态样式
lis.forEach((item,index)=>{
    item.addEventListener('click',function(){
        lis.forEach((item1)=>{
            item1.classList.remove('active');
        })
        rbs.forEach((item2)=>{
            item2.classList.remove('active');
        })
        lis[index].classList.add('active');
        rbs[index].classList.add('active');
        line.className='line line'+(index+1); //index是从0开始，所以这里要+1
    })
})

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151