前端--js实现选项卡

实现的效果：点击相应的选项，出现相应的内容 知识点：

1、css样式中的定位；2、css的display属性；3、js实现时通过加class名实现隐藏出现效果；4、this的使用

1、基本结构与样式

<div id="box">
    <ul>
        <li class="check">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
    <div class="check">内容一</div>
    <div>内容二</div>
    <div>内容三</div>
</div>

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 500px;
        margin: 20px auto;
    }

    #box ul {
        list-style: none;
        position: relative;
        top: 1px
    }

    ul li {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid orange;
        text-align: center;
        cursor: pointer;
    }

    #box div {
        text-align: center;
        height: 200px;
        line-height: 200px;
        border: 1px solid orange;
        display: none;
    }

    ul li.check {
        border-bottom: 1px solid #fff;
    }

    #box div.check {
        display: block;
    }
</style>

2、js获取想要操作的对象

var box = document.getElementById("box");
var list = box.getElementsByTagName("li");
var con = box.getElementsByTagName("div");

3、点击效果的实现

for(var i = 0;i<list.length;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 = 'check';
    con[index].className = 'check';
    }
}

4、效果