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


Posted in Javascript onJune 14, 2016

分别利用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实例—选项卡的简单实现(js源码和jQuery) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
深入浅析JavaScript的API设计原则
Jun 14 #Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 #Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 #Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 #Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 #Javascript
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
php实现可逆加密的方法
2015/08/11 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解vue-router 路由元信息
2017/09/13 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue按需加载实例详解
2019/09/06 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
java判断三位数的实例讲解
2019/06/10 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python suds访问webservice服务实现
2020/06/26 Python
css3的transition属性详解
2014/12/15 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书