如何用原生js 显示其中一个,隐藏其他的 。

http://jsbin.com/qobaguguro/edit?html,css,js,output

window.onload=function(){
      var li=document.getElementsByTagName("li");
         a=document.getElementsByClassName("a");
        for(var i=0;i< a.length;a++){
            console.log(a);
        }
       li.onclick=function(){
            li.className="a";  //这个为什么没有反应? 
       }
};
<ul>
    <li> 2</li>
    <li class="a">4 </li>
    <li>5 </li>
</ul>

必须用js
我想 a的部分 显示 ,其它li 不显示 通过css设置字体背景为白。
然后自己点击li给li添加a,其它a就删除。请问如何把我思路完整的写出来。

阅读 6.3k
6 个回答
window.onload=function(){  
    var li=document.getElementsByTagName("li");    
      for(var j=0;j<li.length;j++){ 
       li[j].onclick=function (){        
        for(var i=0;i<li.length;i++){     
           li[i].className='';       
        }         
        this.className='a';       
      }
   }
};
li.each(function(){
    this.onclick - function(){};
});

楼主的这种得用闭包和循环修改样式来实现了
for(var s=0;s<li.length;s++){

(function (s){
li[s].onclick = function(){
    for(var j=0;j<li.length;j++){
        li[j].className="";
    }
    li[s].className="a";
})(s);

}

1.首先,你的for循环写错了,a++怎么可以,是i++;
2.其次,这是自定义属性的问题,因为在TagName取到的是一组标签名,它们的索引(下标)可以对应到i值,但是到点击事件中,循环已经结束所以i就变成了最大值,在这里添加一个自定义属性index,传递进事件中就可以了,跟闭包没什么关系。

    for ( var i = 0 ; i < inputs.length; i++) {
        inputs[i].index = i;
        inputs[i].onclick = function () {
            for ( var j = 0; j < sections.length; j++) {
                sections[j].style.display = 'none';
                sections[this.index].style.display = 'block';
            }
        }
    }
    var li = document.getElementsByTagName('li');
    for (var i = 0; i < li.length; i++) {
      li[i].onclick = function() {
        for (var j = 0; j < li.length; j++) {
          li[j].className = '';
        }
        this.className = 'a';
      }
    }

getElementsByTagName()方法返回的是HTMLCollection类型。
HTMLCollection是包含了网页元素的通用集合,它本身并不含有onclick事件接口。

li.onclick=function(){}

这里仅仅是在li中创建了一个叫做onclick的属性,然后把一个匿名函数赋值给它而已。
要绑定onclick事件必须对某一个具体的DOM,绑定事件要放到循环体里面去

window.onload=function(){
    var li=document.getElementsByTagName("li");
    for(var i=0; i< li.length; i++){
        li[i].onclick = function(){
            for(var j=0; j< li.length; j++){
                li[j].className="";
            }
            this.className="a";
        };
    }
};
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题