Jquery 选项卡( 纯Jquery)

jquery部分:

<script type="text/javascript">
$(function(){
  $('#div1').find('input').click(function(){

    $('#div1').find('input').attr('class','');
    $('#div1').find('div').css('display','none');

    $(this).attr('class','active');
    $('#div1').find('div').eq($(this).index()).css('display','block');

});

});

</script>

样式部分:

<style>

#div1 div{
   border:1px red solid;
   width:100px;
   height:100px;
   display:none;
}
.active{
   background:purple;
}</style></p>

body部分:

<div id="div1"><input class="active" type="button" /> <input type="button" /> <input type="button" /> <input type="button" />

  <div style="display: block">111111</div>

  <div>222222</div>

  <div>333333</div>

  <div>444444</div>
</div>

 

 

111111
222222
333333
444444
posted @ 2012-11-28 09:43  刚会爬  阅读(155)  评论(0编辑  收藏  举报