<!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. cmake 出现问题

    问题: CMake Error at CMakeLists.txt:3 (find_package): By not providing "FindOpenCV.cmake" in ...

  2. cf 712E Memory and Casinos

    题意:有一行$n(n \leq 100000)$个方格,从左往右第$i$个方格的值为$p_i(p_i = \frac{a}{b}, 1 \leq a < b \leq 1e9)$,有两种操作,一 ...

  3. 《利用python进行数据分析》读书笔记--第八章 绘图和可视化

    http://www.cnblogs.com/batteryhp/p/5025772.html python有许多可视化工具,本书主要讲解matplotlib.matplotlib是用于创建出版质量图 ...

  4. MVC JS中非表单元素路由传值

    <span id="a" onclick="aaa(111)" style="cursor:pointer;">跳</sp ...

  5. 【Spring】简单的Spring MVC入门例子

    前言 测试特性需要搭建一个简单的Spring MVC的例子,遂记录之,只是例子,只为入门者之示例. 版本说明 声明POM文件,指定需引入的JAR. <properties> <spr ...

  6. python中深复制与浅复制

    转载:http://blog.csdn.net/vicken520/article/details/8227524 java中也经常碰见这种问题.时间原因就不写java方面啦 Python深复制浅复制 ...

  7. Python3基础 访问列表 两个索引值之间的所有元素

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

  8. BLE编程中关键步骤

    获取权限 <uses-permission android:name="android.permission.BLUETOOTH"/> <uses-permiss ...

  9. Linux进程管理

    一.进程管理简介 进程是正在执行的程序或命令,每一个进程都是一个运行实体,都有自己的地址空间,并占用一定的系统资源. 进程管理的作用: 1.判断服务器的健康状态 2.查看系统中的所有进程 3.杀死进程 ...

  10. Making my own Autonomous Robot in ROS / Gazebo, Day 1: Building the static model

    Day 1: Setting up ROS: Indigo OS: Ubuntu 14.04 OS: Gazebo 7.0.0 Initialize the workspace To create t ...