jQuery实例—选项卡(js源码和jQuery)【一些常见方法(1)-练习】
分别利用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>无标题文档</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="" />
<input type="button" value="" />
<input type="button" value="" />
<div class="active"></div>
<div></div>
<div></div> </body>
</html>
jQuery实例—选项卡(js源码和jQuery)【一些常见方法(1)-练习】的更多相关文章
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
- 非常实用的JQuery的选项卡切换源码
<html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...
- jQuery插件pagination.js源码解读
pagination的github地址:https://github.com/gbirke/jquery_pagination 公司用的是1.2的版本,所以我就读1.2的了. jQuery.fn.pa ...
- js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...
- Jquery.cookie.js 源码和使用方法
jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- 14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
随机推荐
- ios开发——实用技术篇Swift篇&多点触摸与手势识别
多点触摸与手势识别 //点击事件 var atap = UITapGestureRecognizer(target: self, action: "tapDo:") self.vi ...
- ResolveClientUrl("~/Styles/Site.cs")%>
区别: <%=ResolveClientUrl("~/Styles/Site.cs")%> 和 <%=ResolveUrl("~/Styles/Site ...
- the railway problem(the example of stack)
this problem is a very classic problem which can use stack to solve. the problem can be searched thr ...
- AngularJS - Watch 监听对象
<body> <div ng-app="myApp"> <div ng-controller="firstController"& ...
- hdu1051 Wooden Sticks
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1051 大意:求最少升序序列的个数. #include <cstdio> #include &l ...
- Maven学习小结(七 生命周期[转])
Maven2的阶段(生命周期)说明:Maven2拥有三套独立的生命周期,Maven的命令也是基于这些生命周期来说的.1.clean:清理先前构建的构件,又分为下面三个下阶段: a.pre-clean ...
- MYSQL基础笔记(五)- 练习作业:站点统计练习
作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...
- Android之Handler探索
Handler背景理解: Handler被最多的使用在了更新UI线程中,但是,这个方法具体是什么样的呢?我在这篇博文中先领着大家认识一下什么是handler以及它是怎么样使用在程序中,起着什么样的作用 ...
- javascript三种创建对象的方式
javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象.那么,既然是面象对象的,如何来创建对象呢? 一.通过”字面量“方式创建. 方法:将成 ...
- Python_sklearn机器学习库学习笔记(五)k-means(聚类)
# K的选择:肘部法则 如果问题中没有指定 的值,可以通过肘部法则这一技术来估计聚类数量.肘部法则会把不同 值的成本函数值画出来.随着 值的增大,平均畸变程度会减小:每个类包含的样本数会减少,于是样本 ...