Tab 选项卡

使用原生js写一个简单的Tab选项卡

HTML

<ul>
    <li>标题1</li>
    <li>标题2</li>
    <li>标题3</li>
</ul>
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>

CSS

ul {
    padding: 0;
}

li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: orange;
    list-style: none;
    float: left;
}

div {
    width: 300px;
    height: 200px;
    font-size: 30px;
    line-height: 200px;
    text-align: center;
    background: aqua;
}

script

let lis = document.getElementsByTagName('li')
let divs = document.getElementsByTagName('div')
let ul = document.getElementsByTagName('ul')[0]
lis[0].style.background = 'aqua'
divs[1].style.display = 'none'
divs[2].style.display = 'none'

方法一

1. 使用var 声明变量

for (var i = 0; i < lis.length; i++) {
    // 给每一个li加一个index作为标记
    lis[i].index = i
    lis[i].onclick = function() {
    for (var j = 0; j < divs.length; j++) {
        lis[j].style.background = 'orange'
        divs[j].style.display = 'none'
    }
    // 此时的this是指向每一个li
    lis[this.index].style.background = 'aqua'
    divs[this.index].style.display = 'block'
    }
}

2. 或使用let 声明变量，let拥有块级作用域，就省掉了使用this的步骤

for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function() {
    for (let j = 0; j < divs.length; j++) {
        lis[j].style.background = 'orange'
        divs[j].style.display = 'none'
    }
    lis[i].style.background = 'aqua'
    divs[i].style.display = 'block'
    }
}

方法二

• 使用事件侦听器

let arr = []
// 数组保存li 的innerText
for (let i = 0; i < lis.length; i++) {
    arr.push(lis[i].innerText)
}
// 初始index为0
let initIndex = 0;
ul.addEventListener('click', function(e) {
    // 找到所点击的li
    let index = arr.indexOf(e.target.innerText)
    //进行判断，点击两次的话，不会让div消失
    if(index != initIndex){
        lis[index].style.background = 'aqua'
        divs[index].style.display = 'block'
        //将上一次点击的li，div 还原
        lis[initIndex].style.background = 'orange'
        divs[initIndex].style.display = 'none'
        initIndex = index
    }
})

• 方法一主要使用了双for循环来进行所有样式的清除，
• 方法二使用事件事件侦听的方式，只对上一个点击的目标进行样式的清除
• 相比来说，我个人认为第二种方式更好
• 如有不足之处，还请斧正