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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
浅析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
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
php 文件上传类代码
2011/08/06 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
JavaScript静态的动态
2006/09/18 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
JS验证码实现代码
2017/09/14 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
python类继承用法实例分析
2015/05/27 Python
Djang中静态文件配置方法
2015/07/30 Python
详解Python import方法引入模块的实例
2017/08/02 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python 互换字典的键值对实例
2019/02/12 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
一月红领巾广播稿
2014/02/11 职场文书
会议室标语
2014/06/21 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
设备收款委托书范本
2014/10/02 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript