<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body style="text-align:center;margin-top:150px;">

<div class="tabs" id="tabs">

	<span style="color:red;" >tab1</span>

	<span>tab2</span>

	<span>tab3</span>

</div>

<div id="tabs-content">

	<p style="">tab1</p>

	<p style="display:none;">tab2</p>

	<p style="display:none;">tab3</p>

</div>

<script type="text/javascript">

	window.onload = function () {

		var tabs = document.getElementById("tabs").getElementsByTagName("span");

		for (var i = 0 ; i < tabs.length; i ++) {

			tabs[i].index = i;

			tabs[i].onclick = function () {

				//下一行this.index，请勿直接用i 或者tabs[i] 代替。 这跟javascript的异步操作有关。感兴趣的可以去了解下！

				showHide(this.index, tabs);

			}

		};

	};

	function showHide (index, tabs) {

		var obj = document.getElementById('tabs-content');

		var p = obj.getElementsByTagName('p');

		for (var i = 0; i < p.length; i ++) {

			if (i == index) {

				tabs[i].style.color = "red";

				p[i].style.display = "block";

			} else {

				tabs[i].style.color = "black";

				p[i].style.display = "none";

			}

		}

	}

</script>

</body>

</html>

　　

javascript 实现tab菜单切换的更多相关文章

  1. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Tab 菜单切换

    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/hshen/layui.css ...

  3. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

  5. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 简易CSS3 Tab菜单 Tab切换滑块动画

    今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS ...

  7. 第一百四十八节，封装库--JavaScript，菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  8. 简易版CSS3 Tab菜单 实用的Tab切换

    今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...

  9. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

随机推荐

  1. 结构体struts的长度

    在需要计算结构体大小的时候,涉及到的一个问题就是其对齐模数 计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值是某个数k(通常它为4或8)的倍数,这就是所谓的内存对齐,而 ...

  2. File相关的读取和写入以及复制

    import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileI ...

  3. [转]save all TWebbrowser Frame Sources?

    注:有一定的参考价值,转存 // Code 1 uses  ActiveX, MSHTML_TLB, ComCtrls, ComObj; function GetBrowserForFrame(Doc ...

  4. SQL 对时间的处理

    --获取当前日期(如:yyyy-mm-dd)Select Datename(year,GetDate())+'-'+Datename(month,GetDate())+'-'+Datename(day ...

  5. linux git的安装与使用

    一. Git安装. sudo apt-get install git 二.Git提交到远程仓. 1.到github或其coding(提供免费的私有仓)创建项目. 2.项目目录下初始化git. sudo ...

  6. 一些Unity基础操作的性能测试

    从以前一个文章转移过来的内容,以后会进一步进行测试  内容  毫秒数(Editor)  毫秒数(Build PC) 加减内部变量 4ms  1ms new List<int>() 559m ...

  7. 理解＃define offsetof(struct_t,member) ((int)&((struct_t *)0)->member)

    #define offsetof(struct_t,member) ((int)&((struct_t *)0)->member) 这个东西很多人应该知道: offsetof是用来判断结 ...

  8. Query Designer：变量的偏移 Variable Offset

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. 【所见即所得】textarea 精确限制字数、行数，中、英、全半角混检 。源码带注释

    主要解决难点: 1 中文 全角2字符深深的恶意 2 多行输入textarea 手动,自动换行问题 3 获得每行内容 原创,转载请注明出处! <!DOCTYPE html PUBLIC " ...

  10. LMAX Disruptor—多生产者多消费者中，消息复制分发的高性能实现

    解决的问题 当我们有多个消息的生产者线程,一个消费者线程时,他们之间如何进行高并发.线程安全的协调? 很简单,用一个队列. 当我们有多个消息的生产者线程,多个消费者线程,并且每一条消息需要被所有的消费 ...