用js制作一个简单的选项卡

1.进行div布局

 <div class="box">
        <div class="topbox">
            <span class="btn">前端</span>
            <span class="btn">java</span>
            <span class="btn">python</span>
            <span class="btn">Linux</span>
            <i class="line"></i>
        </div>
        <div class="bottombox">
            <div class="bottomlist"><p>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）</p></div>
            <div class="bottomlist"><p>Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于独立的、大型项目的开发。</p></div>
            <div class="bottomlist"><p>C++是C语言的继承，它既可以进行C语言的过程化程序设计，又可以进行以抽象数据类型为特点的基于对象的程序设计，还可以进行以继承和多态为特点的面向对象的程序设计。C++擅长面向对象程序设计的同时，还可以进行基于过程的程序设计，因而C++就适应的问题规模而论，大小由之。</p></div>
            <div class="bottomlist"><p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div>
        </div>
    </div>

2.对其书写css样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 100px auto;
            overflow: hidden;
            width: 400px;
            height: 300px;
            border: 1px solid#000;
            background-color: #000;
        }
        .topbox {
            position: relative;
            height: 30px;
            border-bottom: 1px solid #cbcbcc;
            font-size: 0px;
            line-height: 30px;
        }
        .topbox span {
            cursor: pointer;
            display: inline-block;
            width: 100px;
            text-align: center;
            font-size: 13px;
            color: #fff;
        }
        .bottombox {
            width: 2000px;
            height: 170px;
            transform: translatex(0px);
            /* transition: transform .5s ease-in-out; */
            transition: transform .5s ease-in-out;
        }
        .bottombox div {
            float: left;
            width: 500px;
            height: 170px;
            color: #ddd;
            font-weight: 700;
        }
        .line {
            position: absolute;
            left: 30px;
            bottom: 0;
            width: 40px;
            height: 2px;
            background-color: pink;
            transition: left .3s ease-in-out;
        }
    </style>

效果图如下

3.对其书写js代码（通过类来操作选项卡）

<script>
        /* 
        通过类来操作选项卡
         */
         var btn = document.querySelectorAll(".btn");
         var bottom = document.querySelector(".bottombox");
         var line = document.querySelector(".line");
         for(var i =0;i<btn.length;i++){
             btn[i].index = i;
             btn[i].onclick = function(){
                bottom.style.transform = "translateX("+(-500*this.index)+"px)";
                //获取当前span的左偏移
                line.style.left = (this.offsetLeft+30)+ "px";
             }
         }
    </script>

4.实现的效果为