<!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. prince2 证书有用吗

    prince2 证书有用吗  ? 项目管理是一件非常困难的事情,新闻里充斥着虽利润高却未能成功支付的项目案例.这是为什么呢? 最主要的原因是项目工作比日常的商业工作要困难的多.日常的商业工作往往是重复 ...

  2. 机器人操作臂运动学入门一--D-H参数标定

    最近重新学习机器人方面的知识,想到一年以前在学校选修<机器人学技术基础>这门课的时候,老师虽然讲机器人的各个方面的知识都讲到了,但只是浮光绿影的的提到,并没有真正讲到深处,我的理解也没有更 ...

  3. TRUNCATE TABLE (Transact-SQL)

    删除表中的所有行,而不记录单个行删除操作. TRUNCATE TABLE 与没有 WHERE 子句的 DELETE 语句类似:但是,TRUNCATE TABLE 速度更快,使用的系统资源和事务日志资源 ...

  4. STM32F429i-DISCO FreeRTOS keil STM32CubeMX

    目标: 在STM32F429 Disco开发板上用FreeRTOS双线程点亮双闪led. 准备: 0. STM32F429i-DISCO 1. keil ARMMDK 5.13 2. STM32Cub ...

  5. No module named 'urllib2'

    import urllib2 response = urllib2.urlopen('http://www.baidu.com/') html = response.read() print html ...

  6. msys2安装

    最近在研究编译linux下的软件到windows环境中. 发现了一个比cygwin更好玩的东西,那就是msys2 其实之前也在试玩mingw和mingw64,2016-08-12,当时的最新版本,mi ...

  7. 续并查集学习笔记——Gang团伙题解

    一言不合先贴题目 Description 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙 ...

  8. Android4.0.3 USB OTG底层插入上报过程分析(1)

    下面的两个宏是PM8058的MMP11(R15),MMP12(P15)管脚.#define EXT_CHG_VALID_MPP 10#define EXT_CHG_VALID_MPP_2 11 sta ...

  9. Bootstrap_面板

    一.基础面板 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块. 由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“pan ...

  10. python之前端

    一.Html总结 1.Html简介 HTML 是一种标记语言 忽略大小写,语法宽松 使用 HTML 标记和元素,可以: 控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 ...