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

如何用原生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就删除。请问如何把我思路完整的写出来。


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';       
      }
   }
};

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";
        };
    }
};

楼主的这种得用闭包和循环修改样式来实现了
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);

}


    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';
      }
    }

li.each(function(){
    this.onclick - function(){};
});

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';
            }
        }
    }
【热门文章】
【热门文章】