<!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. java 入门学习

    想要学习java,首先你要明白java是干嘛的,它有什么吸引之处,懂程序的都应该知道,java是很多计算机语言的根本,无论在什么时代,科技如何更新,java都不会落后,现在的我在学习初级java,下面 ...

  2. PowerDesigner设计Name和Comment 替换

    这两天在用powerdesigner设计数据库.一直以为name就是注释名字来着.后来生成sql语句 怎么就没有注释信息那. 后来看了半天才知道自己范2了. 通过各种信息查找.大多都是改databas ...

  3. 【转】ACM训练计划

    [转] POJ推荐50题以及ACM训练方案 -- : 转载自 wade_wang 最终编辑 000lzl POJ 推荐50题 第一类 动态规划(至少6题, 和 必做) 和 (可贪心) (稍难) 第二类 ...

  4. 三元运算与lambda表达式

    #三元运算,就是对if else的简写 if 1 == 1: print("jasper") else: print("sb") 三元运算写法 name=&qu ...

  5. AngularJS 学习

    原文链接: https://www.zybuluo.com/frank-shaw/note/509653 Promises in AngularJS, Explained as a Cartoon h ...

  6. Other linker flags

    -ObjC:加了这个参数后,链接器就会把静态库中所有的Objective-C类和分类都加载到最后的可执行文件中-all_load:会让链接器把所有找到的目标文件都加载到可执行文件中,但是千万不要随便使 ...

  7. MySQL中int类型的字段使用like查询方法

    方法参考自: http://stackoverflow.com/questions/8422455/performing-a-like-comparison-on-an-int-field 也就是使用 ...

  8. Oracle 截取字符串

    如下有一个创建函数的代码,是将一穿字符串按照逗号‘,’分割成若干段 create or replace function SplitStringByComma(aName in varchar2) r ...

  9. Python3基础 列表乘一个整数 扩增列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  10. Centos7安装图形界面

    安装好字符操作系统后,使用网络安装(网络安装比较简单,不需要配置yum文件): yum groupinstall "GNOME Desktop" -y startx centos7 ...