最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧,

第一步:先把布局写出来;

<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实现

<script>
window.onload=function(){  //用window.onload  把代码放在了head里边   没有放在文档底部 哈哈

/*获取到元素*/

var div=document.getElementById('div1');
var ainput=div.getElementsByTagName('input');
var li=div.getElementsByTagName('div');

/*for 循环 获取按钮*/
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='';   //当点击后使元素class为空   下边再添加当前的class
li[i].style.display='none';
}
this.className='active';
li[this.index].style.display='block';  //使用索引  把 div和按钮连接起来
}
}
}
</script>

如果有其他好的思路的话 大家可以一块拿出来讨论  哈哈

js 实现tab选项卡的更多相关文章

  1. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  2. 原生js实现tab选项卡

    1.html部分 <body>        <div id="tab">            <div class="tab_menu& ...

  3. JS实现Tab选项卡

    http://www.jb51.net/article/24694.htm http://www.sunsean.com/idTabs/#t1 http://www.cnblogs.com/sskse ...

  4. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

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

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

  8. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  9. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

随机推荐

  1. hdu 4762 Cut the Cake概率公式

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4762 题目大意:一个圆形蛋糕,现在要分成M个相同的扇形,有n个草莓,求n个草莓都在同一个扇形上的概率. ...

  2. 杭州(含嘉兴,绍兴,金华,湖州,义乌)Uber优步司机奖励政策(1月25日~1月31日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 通过例子学python(2.1)

    第二章 列表和元组 2.1 序列概览 #第2章 列表和元组 #2.1 序列概览 #序列sequence , 序列中每一个元素被分配一个序号,即元素的位置,也称为索引. #从前往后,0,1,2,3,:从 ...

  4. wikioi 1154 能量项链 (2006年NOIP全国联赛提高组)

    题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...

  5. baidu

    [百度凤巢业务实习]   查看打赏情况 打赏100shb 打赏1000shb 打赏10000shb 只看此用户 大字体 楼主   百度凤巢业务--百度最核心的业务做数据挖掘,机器学习,广告算法等,主要 ...

  6. 【Android - 框架】之Retrofit+RxJava的使用

    前几天分别对Retrofit和RxJava进行了总结,这个帖子打算把Retrofit结合RxJava使用的方法总结以下.有还不了解Retrofit或RxJava的朋友可以参考下面的帖子学习~ [And ...

  7. ※C++随笔※=>☆C++基础☆=>※№→C++中 #include<>与#include""

    #include<> 使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: #include"" 使用双引号则表示首先在 ...

  8. iOS--为视图添加阴影

    iOS–为视图添加阴影 情况一:视图添加圆角,在添加阴影 //阴影视图 self.viewShadow = [[UIView alloc]initWithFrame:CGRectMake(0, 0, ...

  9. Gitolite轻松部署/管理git server

    对于今天越来越受欢迎的Git,相信做开发的朋友都基本有所耳闻.它最大的便利就是分布式的开发库,让使用git作为源码管理库的开发者可以在本地提交代码的修改而不用提交到远程的库,同时需要和团队协作.同步代 ...

  10. eclipse-SDK-3.7-win32;eclipse-java-indigo-win32;eclipse-jee-indigo-win32 区别(ZZ)

    eclipse-SDK-3.7-win32:eclipse-java-indigo-win32:eclipse-jee-indigo-win32 三个都是用于win32,即windows系统的32位机 ...