使用JS实现一个简单的选项卡效果

实现以下效果

使用到的知识点

HTML — 结构

• 需要实现一个选项卡，里面有很多模块，因此首先需要一个div标签去包裹
• 选项卡的选项部分使用列表去实现 ul-li
• 选项卡的内容可以使用div来实现，每一个内容使用一个div

<!--快速生成以下代码的快捷键 div.main>(ul>li*3{选项$})+div*3{内容$} -->
    <div class="main" id="main">
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>

css —样式

• 样式中第一步就是清空默认样式，一般是导入清空样式表，如果没有这个样式表，就把这个demo中用到的标签的默认清空。
• 外面的大盒子需要居中–因为它是块级元素，因此，块级元素居中使用到的是margin这个属性，前提是给他一个宽度。
• 选项卡部分需要的样式
  • 首先列表属于块元素，它是独占一行的，但是我们实现的效果是在同一行，因此需要转化（也可以使用浮动）；
  • 需要给每一个选项卡一个固定的高度和宽度，让行高等于高度可以实现文本垂直居中。并且实现里面的内容水平居中，文本的居中方式是text-align属性；
  • 每一个选项卡需要一个边框；
  • 当把下面的内容添加边框以后，选项卡的边框和内容的边框都会有，因此这里可以使用一个相对定位，让选项卡向下方移动1像素，top为正值就是向下；
• 内容部分：和选项卡类似，但是不需要加宽度，可以让他去继承父元素的宽度。当选项卡没选中时，内容部分是隐藏的，这里使用display：none这种方法，因为这个隐藏是不占位的。
• 点击时：选项卡变色，内容也变色并且显示

       * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .main {
            width: 500px;
            margin: 20px auto;
        }

        .main li {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #333;
            margin-right: 10px;
            position: relative;
            top: 1px;
            cursor: pointer;
        }

        .main div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid #333;
            display: none;
        }

        .main li.choose {
            background-color: steelblue;
            border-bottom-color: steelblue;
        }

        .main div.choose {
            background-color: steelblue;
            display: block;
        }

js部分 —行为

• 第一步获取想要操作的元素
• 操作 ：在css部分通过添加class名实现点击，因此当点击那个选项卡使就给这个选项卡加那个class名
  • 循环遍历每一个选项卡为它添加点击事件
  • 当点击时，首先需要清空所有的class名，然后给被点击的选项卡和相应的内容添加class这个类

<script>
        var main = document.getElementById("main");
        var list = main.getElementsByTagName("li");
        var con = main.getElementsByTagName("div");

        for(var i = 0;i<list.length;i++){
            // 文档在执行的时候，从上向下执行，并且把页面中的所有代码包括js加载完成以后用户才可以去实现点击，因此当用户在点击的时候，i已经是3，因此在这里我把每次循环的i值记录一下；
            list[i].index = i;
            list[i].onclick = function(){
                for(var i = 0;i<list.length;i++){
                    list[i].className = "";
                    con[i].className = "";
                }
                var index = this.index;
                list[index].className = "choose";
                con[index].className = "choose";
            }
        }
    </script>

选项卡的实现，难点在于鼠标点击的时候i的值已经是最大值，所以需要使用一个值去记录。