为了账号安全,请及时绑定邮箱和手机立即绑定

不能为每个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;为什么也加不上去?

正在回答

1 回答

  1. id是对象的固有属性,可以直接调用,你这个index是自定义属性

    2.你的li上面只有一个li的class为red-line 

     建议你可以这样调用  .personel-group ul li{} 这样既有利于seo的优化又可以设置所有li的css


0 回复 有任何疑惑可以回复我~
#1

鄢栋 提问者

class为red-line的li的样式是动态添加的,我自己已经解决了,不过还是非常感谢您的热心回答哦。^^
2016-10-27 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

不能为每个li正确添加index?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信