上次用原生的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. HDOJ 2011 多项式求和

    Problem Description 多项式的描述如下: 1 - 1/2 + 1/3 - 1/4 + 1/5 - 1/6 + - 现在请你求出该多项式的前n项的和. Input 输入数据由2行组成, ...

  2. C++引用(Reference)

    引用(Reference)是C++语言相对于C语言的又一个扩充,类似于指针,只是在声明的时候用&取代了*.引用可以看做是被引用对象的一个别名,在声明引用时,必须同时对其进行初始化.引用的声明方 ...

  3. phpmyadmin万能密码

    影响版本:2.11.3 / 2.11.4 利用方法:用户名处写入‘localhost’@'@”则登录成功. (注意全部是英文标点符号,最后一个为英文双引号)

  4. 利用Trie树对字符串集合进行排序并计算特征值

    该算法用于将一组乱序的字符串反序列化到一个Trie树中,这个过程即可视为对字符串进行了一次排序. 还可以通过调用 GetFeatureString 将该 Trie 树重新序列化. #include & ...

  5. grunt个人理解

    最近在学习grunt的内容,也希望能将grunt使用在新的项目中,本文是对grunt的相关概念的个人理解,仅供与道友们交流和学习,如有疑义,欢迎道友们指点. 首先,grunt是基于nodejs的,那就 ...

  6. 使用Python扫描端口情况

    #!/usr/bin/python# -*- coding:utf8 -*-# Python:          2.7.8# Platform:        Windows# Authro:    ...

  7. web项目学习之sitemesh

    sitemesh主要有三个主要文件:sitemesh.xml,decorators.xml和做布局用的jsp页面. 一.sitemesh.xml 对于sitemesh.xml这个文件,官方文档上说它不 ...

  8. 一款很不错的html转xml工具-Html Agility Pack

    之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串. ...

  9. Java实现平衡二叉树(AVLTree)的构建

    近期在学习数据结构上关于平衡二叉树的知识,看了严老师的思路,感觉用java写出递归的构建方式有点困难,由于当中的递归须要把引用传进去,所以感觉是要实现起来比較麻烦,所以就首先想到使用非递归的方式来实现 ...

  10. c++中返回对象与返回引用的区别

    这几天在做用C++做课程设计,对其返回对象的实现感到迷惑. 通过对汇编代码的分析,可以清楚的看到,直接返回引用和返回对象的区别到底是什么. 分析的程序如下 #include<cstdio> ...