前端--js實現選項卡

不要情緒發表於2020-02-04
前端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、效果

前端--js實現選項卡

相關文章