这里是选项卡的html和js代码，但是js代码中有一些代码看不太懂
```html
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.items {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgb(206, 106, 106);
}
.concents {
width: 400px;
height: 300px;
border: 1px solid #000;
text-align: center;
box-sizing: border-box;
line-height: 300px;
}
#concent {
width: 400px;
height: 300px;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<ul id="item">
<li class="items" style="background-color: red;">第一个</li>
<li class="items">第二个</li>
<li class="items">第三个</li>
<li class="items">第四个</li>
</ul>
<div id="concent">
<div class="concents" style="display: block;">第一个</div>
<div class="concents">第二个</div>
<div class="concents">第三个</div>
<div class="concents">第四个</div>
</div>
我不太理解的是 items[i].index = i 这段代码起的是什么作用，还有在后面会用它来实现内容区的一个显示的
代码 concents[this.index].style.display = 'block' 不理解他们是怎么运行的
```javascript
<script>
var items = document.querySelector('#item').getElementsByClassName('items')
var concents = document.querySelector('#concent').getElementsByClassName('concents')
console.log(concents[2])
for (i = 0; i <items.length; i++) {
items[i].index = i
items[i].onclick = function () {
for (var j = 0; j < items.length; j++) {
items[j].style.backgroundColor = 'rgb(206, 106, 106)'
concents[j].style.display = 'none'
}
this.style.backgroundColor = 'red'
concents[this.index].style.display = 'block'
}
}
</script>
</body>
这个demo里面，直接采用i题主应该就很好理解了，如下代码，但是直接用i有问题，因为点击触发事件的时候，本次循环已经执行完毕，i值已经为items.length，此时通过concents[i]，是读取不到对应元素的，点击第一个期望是concents[0],但此时是concents[4]。
他这里只不过是给每个item加了一个index属性，固定当前的i值，方便后面concents[this.index]找到对应的item。
for (i = 0; i < items.length; i++) {
// items[i].index = i;
items[i].onclick = function() {
for (var j = 0; j < items.length; j++) {
items[j].style.backgroundColor = "rgb(206, 106, 106)";
concents[j].style.display = "none";
}
this.style.backgroundColor = "red";
// concents[this.index].style.display = "block";
concents[i].style.display = "block";
};
}
items[i].index = i
// 这里的index赋值，是为了下面 这行找到 对应的内容项
// 先把点击的 i 存一下，然后 将其他内容块 display：none一下，再找到对应下标的concents，设置为display：block
concents[this.index].style.display = 'block'