不能为每个li正确添加index?
html:
<div class="nav-detail">
<div class="team-introduction"><span>OUR TEAM</span></div>
<div>
<div class="personel-group">
<ul id="personal-group-list">
<li class="red-line">
<div>
<span>高管人员</span>
</div>
</li>
<li>
<div>
<span>产品组</span>
</div>
</li>
<li>
<div>
<span>程序组</span>
</div>
</li>
<li>
<div>
<span>其他</span>
</div>
</li>
</ul>
</div>
<div class="personel-group-picture" id="personel-group-picture">
<div class="manager-portrait">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
</div>
<div class="product-portrait">2</div>
<div class="programmer-portrait">3</div>
<div class="other-portrait">4</div>
</div>
</div>
</div>
css:
.nav-detail {
text-align: center;
}
.team-introduction {
margin-top: 98px;
margin-bottom: 60px;
font-size: 24px;
font-weight: bold;
}
li {
list-style-type: none;
}
#personal-group-list li{
list-style-type: none;
display: inline-block;
width: 180px;
font-size: 18px;
color: #333;
float: left;
padding: 10px 0;
border-bottom: 1px solid #D3D3CA;
}
.red-line {
border-bottom: 3px solid red;
}
#personal-group-list li div {
display: inline;
width: 180px;
}
.personel-group {
text-align: center;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.personel-group span {
cursor: pointer;
}
.personel-group-picture {
border-bottom: 1px solid #D3D3CA;
width: 1200px;
margin: 0 auto;
}
.manager-portrait {
padding: 60px 0 60px 0;
height: 364px;
}
.manager-portrait img {
margin: 56px;
}
.product-portrait {
display: none;
}
.programmer-portrait {
display: none;
}
.other-portrait {
display: none;
}
js:
window.onload = function () {
var lists = document.getElementById('personal-group-list').getElementsByTagName('li')
var divs = document.getElementById('personel-group-picture').getElementsByTagName('div')
if (lists.length != divs.length) {
return
}
for (var i = 0; i < lists.length; i ++) {
lists[i].index = i
}
}
但是打开浏览器的控制台,查看element,li元素并没有加上index这个属性,求大神帮我看一下问题出在哪里?
还有就是给每个li添加一个border-bottom:3px solid red;为什么也加不上去?