选项卡简单版

原生js:

window.onload=function(){
                var oBox=document.getElementById("box");
                var aInput=oBox.getElementsByTagName('input');
                var aDiv=oBox.getElementsByTagName('div');
                for(var i=0;i<aInput.length;i++){
                    aInput[i].index=i;
                    aInput[i].onclick=function(){
                        for(var i=0;i<aInput.length;i++){
                            aInput[i].className='';
                            aDiv[i].className='';
                        }
                        this.className='on';
                        aDiv[this.index].className='active';
                    }
                    
                }
            }

 

jquery版:

$(function(){
    $('#box input').click(function(){
        $('#box input').removeClass('on');
        $('#box div').hide();
        $(this).addClass('on');
        $('#box div:eq('+$(this).index()+')').show();//eq的第一种方法
            $('#box div').eq($(this).index()).show();  //eq的第二种方法
    });
});

 

jquery简洁版:

 

$(function(){
                    $('#box input').click(function(){
                        $(this).addClass('on').siblings('input').removeClass('on'); //this的兄弟都移除class，属于链式运动
                        $('#box div:eq('+$(this).index()+')').show().siblings('div').hide();
                    });
                });