前端之选项卡

程序媛刘刘

已于 2022-11-23 09:44:26 修改

阅读量203

点赞数

分类专栏：前端学习文章标签： javascript css 前端

于 2022-11-22 15:48:15 首次发布

本文链接：https://blog.csdn.net/weixin_53105591/article/details/127984208

版权

本文介绍了如何利用 JavaScript 代码实现前端交互中的选项卡功能，通过切换不同的内容区域，提供良好的用户体验。同时，文章可能还涉及了 CSS 样式的设置，以美化选项卡的显示效果。

摘要由CSDN通过智能技术生成

js 实现选项卡功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }

        body {
            background-color: #f5f5f5;
        }

        .tab {
            width: 978px;
        }

        .tab .tit {
            height: 40px;
            line-height: 40px;
        }

        .tab .tit .a-wrapper {
            float: right;
        }
        .a-wrapper a {
            color: #666;
            margin-left: 20px;
        }
        .a-wrapper a.active {
            color: #FF7416;
            border-bottom: 2px solid #FF7416;
        }
        .content li {
            width: 234px;
            height: 300px;
            background: #fff;
            text-align: center;
            float: left;
            margin-right: 14px;
            position: relative;
            top: 0;
        }
        .content li:last-child {
            margin-right: 0;
        }
        .content li:hover {
            top: -2px;
            box-shadow: 0 15px 30px #ccc;
            transition: 0.3s;
        }
        .content .img-wrapper img {
            width: 160px;
        }
        .co