jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】

分别利用javascript的源码和jQuery来实现一个简单的选项卡，对比各自的步骤。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    display:none;
    width:50px;
    height:50px;
    border:1px solid red;
    }
.active{
    display:block;
    }
.back{
    background:red;
    }
</style>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
//javascript源码写
/*window.onload=function(){
    var aInput=document.getElementsByTagName('input');
    var aDiv=document.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].style.display='none';
                }
            this.className='back';
            aDiv[this.index].style.display='block';
            }
        }
    };*/
    
//jQuery写    
$(function(){
    $('input').click(function(){
        $('input').attr('class','');
        $('div').css('display','none');
        $(this).attr('class','back');
        $('div').eq($(this).index()).css('display','block');
        
        });
    });
    
</script>
<script>

</script>
</head>

<body>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div class="active">111</div>
<div>222</div>
<div>333</div>


</body>
</html>

posted @ 2016-06-13 17:02  MO蓦然回首  阅读(391)  评论(0)  编辑  收藏  举报