<!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. Nginx的安装配置

    1.安装PCRE库 $ cd /usr/local/ $ https://sourceforge.net/projects/pcre/files/pcre/8.36/ $ tar -zxvf pcre ...

  2. Android动态方式破解apk终极篇(加固apk破解方式)

    一.前言 今天总算迎来了破解系列的最后一篇文章了,之前的两篇文章分别为: 第一篇:如何使用Eclipse动态调试smali源码 第二篇:如何使用IDA动态调试SO文件 现在要说的就是最后一篇了,如何应 ...

  3. Mysql修改字段长度

    alter table '表名' modify column '列名' varchar(50);

  4. 显示Class 'Think\Controller\FuController' not found和Call to a member function assign() on a non-object 的错误问题

    Class 'Think\Controller\FuController' not found 错误位置 FILE: D:\wamp\www\tinkphp\Application\Come\Cont ...

  5. window7 x64 path

    %SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem; %SYSTEMROOT%\System32\WindowsPowerS ...

  6. wcf 同时支持webhttp 和 引用方式

    wcf 实现参考 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 兼容两种方式 1.修改服务端webconfig <system. ...

  7. Cheatsheet: 2016 11.01 ~ 11.30

    Web Getting Started With Vapor: A Swift Web Framework Front-end vs Back-end vs Network Performance S ...

  8. JavaScript数组类型

    特点 动态长度 一个数组里面的元素可以是不同类型 数组的length属性不是只读属性,可通过length延长数组也可以删减数组的长度 定义数组两种方法 //方法一: var names = new A ...

  9. 【树莓派】【转】将树莓派Raspberry Pi设置为无线路由器(WiFi热点AP,RTL8188CUS芯片)

    下文为转载,文章转自:http://wangye.org/blog/archives/845/,仅供本次学习实践参考. 最近又开始折腾起Raspberry Pi来了,因为某处上网需要锐捷拨号,于是我就 ...

  10. 解决httpServletRequest.getParameter获取不到参数

    用httpServletRequest.getParameter接收post请求参数,发送端content Type必须设置为application/x-www-form-urlencoded:否则会 ...