上次用原生的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的更多相关文章

  1. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  2. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  3. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  4. 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  5. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  6. 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 ...

  7. jQuery 显示与隐藏 tab选项卡

    方法一:使用display样式:block.none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式 ...

  8. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  9. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

随机推荐

  1. 4G

    4G网络的概念是什么 浏览:5461 | 更新:2013-02-16 15:08 4G是第四代无线传输技术的缩写,它是宽带移动通信阶段,是继3G的标准的另一个阶段.随着Internet及多媒体技术的快 ...

  2. JVM性能调优-GC内存模型及垃圾收集算法

    JVM内存管理模型: http://developer.51cto.com/art/201002/184385.htm 一 JVM内存模型 1.1 Java栈 Java栈是与每一个线程关联的,JVM在 ...

  3. zabbix 飞信集成配置

    1.环境说明: (Gentoo Linux环境) # uname -a Linux Crob 2.6.34-gentoo #1 SMP Mon May 31 15:45:25 CST 2010 x86 ...

  4. javascript的几个问题

    基础 1. 可选的分号 只有在缺少了分号就无法正确解析代码的时候,javascript,才会在一行的最后自动添加; a = 3 //自动填充 b = 4; var a a = 3 console.lo ...

  5. A Round Peg in a Ground Hole - POJ 1584 (判断凸多边形&判断点在多边形内&判断圆在多边形内)

    题目大意:首先给一个圆的半径和圆心,然后给一个多边形的所有点(多边形按照顺时针或者逆时针给的),求,这个多边形是否是凸多边形,如果是凸多边形在判断这个圆是否在这个凸多边形内.   分析:判断凸多边形可 ...

  6. 杭电 1795 The least one

    The least one Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. sublime text2 快捷键

    主要快捷键列表: Ctrl+L 选择整行(按住-继续选择下行)Ctrl+KK 从光标处删除至行尾Ctrl+Shift+K 删除整行Ctrl+Shift+D 复制光标所在整行,插入在该行之前Ctrl+J ...

  8. Hibernate输出SQL语句以便调试

    配置方法:1.打开hibernate.cfg.xml文件编辑界面,在Properties窗口处,点击Add按钮,选择Show_SQL参数,输入值为True. *另外,如果按照同样的步骤,分别加入以下参 ...

  9. BZOJ1176: [Balkan2007]Mokia CDQ分治

    最近很不对啊=w= 写程序全是bug啊 ans数组开小了竟然一直不知道,小数据没问题大数据拍不过,交上去RE 蛋疼半天 这个主要把每次询问拆成3个询问. #include<cstdio> ...

  10. 为Android GridView 设置行背景

    经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...