jQuery实例—选项卡的简单实现(js源码和jQuery)

网络编程 jQuery实例—选项卡的简单实现(js源码和jQuery) 06-22

分别利用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="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) 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。

使用jquery获取url及url参数的简单实例
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1、jquery获取url很简单，代码如下：window.location.href;其实只是用到了javascript的基础的win

深入理解jQuery 事件处理
浏览器的事件模型DOM第0级事件模型1.Event实例他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节，比如在哪个元素上触发的事

你不需要jQuery(三) 新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了。fetch()能让我们完成类似XMLHttpRequest(XHR)提供的ajax功能。它们之间的主要区别是，FetchAPI使用了Promises，它让接口更

编辑：广州葆元健康生物科技有限公司

标签：源码,实例,事件,简单,选项卡