jQuery实例—选项卡的简单实现(js源码和jQuery) - [技术教程]

分别利用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>jQuery实例—选项卡的简单实现(js源码和jQuery) </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="http://www.gimoo.net/t/1902/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>

查看图片

以上这篇jQuery实例—选项卡的简单实现(js源码和jQuery) 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持绿夏网。

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类