js编写选项卡效果

本文实例为大家分享了js选项卡效果的具体代码，供大家参考，具体内容如下

 
  
  
  
   *{
    margin:0;
    padding:0;
   }
   .box{

    margin:50px;
   }
   .box div{
    display:none;
    width: 200px;
    height: 200px;
    border:1px solid black;
   }
   .onclick{
    background:red;
   }
   input{
    border:1px solid #666;
    padding:2px;
   }
  
 
 
  
   
   
   
   1
   2
   3
  
 
 

补充JQ的做法:

$(function(){
  $('.box').find('input').click(function(){
  $('.box').find('input').attr('class','');
  $(this).attr('class','onclick');
  $('.box').find('div').css('display','none');
  $('.box').find('div').eq($(this).index()).css('display','block');

  });
 });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。