这里是选项卡的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>
