tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码:
/*布局*/
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">1111</div>
<div>2222</div>
<div>3333</div>
</div>
/*原生js*/
window.onload=function(){
var div=document.getElementById('div1');
var ainput=div.getElementsByTagName('input');
var li=div.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='';
li[i].style.display='none';
}
this.className='active';
li[this.index].style.display='block';
}
}
}
/*jQuery*/
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq($(this).index()).css('display','block');
});
});
jQuery实现选项卡的方法有好多种, 随着对jq库学习的深入 越来越感觉到jq真的很强大 ,希望可以走的越来越远;
tab选项卡-jQuery的更多相关文章
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- Jquery tab 选项卡 无刷新切换
转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- jQuery 显示与隐藏 tab选项卡
方法一:使用display样式:block.none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式 ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
随机推荐
- mvn archetyoe:generate -DarchetypeCatalog=internal
可以使用 $mvn archetype:generate -DarchetypeCatalog=internal archetypeCatalog表示插件使用的archetype元数据,默认值为rem ...
- poj 1321 棋盘问题【dfs】
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28308 Accepted: 13996 Descriptio ...
- JVM内存管理和JVM垃圾回收机制
JVM内存管理和JVM垃圾回收机制(1) 这里向大家描述一下JVM学习笔记之JVM内存管理和JVM垃圾回收的概念,JVM内存结构由堆.栈.本地方法栈.方法区等部分组成,另外JVM分别对新生代和旧生代采 ...
- Java堆栈详解 .
1. Java中堆栈(stack)和堆(heap) (1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据 ...
- 史上最全WebView使用,附送Html5Activity一份
本文来自:http://www.jianshu.com/users/320f9e8f7fc9/latest_articles感谢您的关注. WebView在现在的项目中使用的频率应该还是非常高的.我个 ...
- Android(java)学习笔记204:自定义SmartImageView(继承自ImageView,扩展功能为自动获取网络路径图片)
1.有时候Android系统配置的UI控件,不能满足我们的需求,Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高. ...
- 剑指offer: 38 数字在排序数组中出现的次数
题目描述 统计一个数字在排序数组中出现的次数.例如输入排序数组{1,2,3,3,3,3,4,5} 和数字3,输出4. 思路如下 1. 预估时间复杂度,最复杂情况是,顺序扫描,统计K出现的次数,时间复杂 ...
- .NET中TextBox控件设置ReadOnly=true后台取不到值三种解决方法
当TextBox设置了ReadOnly=true后要是在前台为控件添加了值,后台是取不到的,值为空,多么郁闷的一个问题经过尝试,发现可以通过如下的方式解决这个问题.感兴趣的朋友可以了解下 当TextB ...
- HDFS的Java客户端操作代码(查看HDFS下所有的文件或目录)
1.查看HDFS下所有的文件或目录 package Hdfs; import java.io.IOException; import java.net.URI; import org.apache.h ...
- C# 内存管理优化实践
内存优化畅想系列文章已经结束了,很多读者读完之后可能觉得“然并卵”,毕竟都是给微软提的建议而已,现在都没有实现.那么为了优化内存,有没有什么我们现在就能用的技巧呢?我的答案是:有.网上关于.net内存 ...