版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/u011043843/article/details/30723933

在线演示：http://jsfiddle.net/Web_Code/TbPDd/embedded/result/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="content-type" content="texthtml;charset=utf-8">

	<title>TabHost</title>

	<style type="text/css">

		 #tab li

		{

			background-color: #3e3e3e;

			list-style: none;

			float: left;

			margin-left: 2px;

			color: white;

		}

		#tabContent

		{

			float: left;

			display: none;

			width: 242px;

			height: 150px;

		}

		#tabContent ul

		{

			list-style: none;

			background-color: #ccc;

			padding-left: 5px;

			margin-top: 0px;

		}

		#main

		{

			width: 250px;

			margin: 0 auto;

			height: 300px;

		}

	</style>

</head>

<body>

	<div id="main">

		<div style="margin-left:-42px">

			<ul id="tab">

				<li onclick="javascript:display(1);" style="background-color:#ccc;color:black;">

				数 据 库

				</li>

				<li onclick="javascript:display(2);">

				前台脚本

				</li>

				<li onclick="javascript:display(3);">

				后台脚本

				</li>

			</ul>

		</div>

		<div id="tabContent" style="display:block">

			<ul>

				<li>MySql</li>

				<li>SQL Server</li>

				<li>Oracle</li>

				<li>DB2</li>

			</ul>

		</div>

		<div id="tabContent">

			<ul>

				<li>HTML</li>

				<li>Ruby</li>

				<li>JavaScript</li>

				<li>Python</li>

			</ul>

		</div>

		<div id="tabContent">

			<ul>

				<li>ASP</li>

				<li>PHP</li>

				<li>.Net</li>

				<li>JSP</li>

			</ul>

		</div>

	</div>

	<script type="text/javascript">

		var divs = document.getElementById("main").getElementsByTagName("div");

		var lis = document.getElementById("tab").getElementsByTagName("li");

		function display(num)

		{

			for(var i = 1; i < divs.length; i++)

			{

				if(i == num)

				{

					var con = divs[num];

					con.style.display="block";

					lis[i-1].style.backgroundColor = "#ccc";

					lis[i-1].style.color = "black";

				}

				else

				{

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

					lis[i-1].style.color = "white";

					lis[i-1].style.backgroundColor = "#3e3e3e";

				}

			}

		}

	</script>

</body>

</html>

Javascript实现简单的选项卡的更多相关文章

  1. javascript简单的选项卡

    实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  3. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  4. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  5. JavaScript设置简单的自动时间

    下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...

  6. Javascript的简单测试环境

    在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...

  7. javaScript(2)---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  8. Javascript学习-简单测试环境

    Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...

  9. JavaScript中简单排序总结

    JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...

随机推荐

  1. Js 操作 Cookies

    <script language=javascript> // cookie其实是一个key=value就是一个cookie而不是 //获得coolie 的值 function cooki ...

  2. iometer测试磁盘IO性能

    of Outstanding I/Os per target – 被选中worker的每个磁盘一次所允许的未处理的异步I/O的数量.模拟测试多个应用向 IO 请求读写,默认是 1.通常不用这个参数,除 ...

  3. 1-19-1 RHEL6启动原理和故障排除

    大纲: 一.RHEL6系统启动原理 BIOS--->mbr--->bootloader--->内核--->init--->/etc/rc.d/rc.sysinit---& ...

  4. java开发中的重中之重-------mysql（基础篇）

    介绍: mysql是目前世界上最流行的关系型数据库,在国内大的互联网公司都在使用mysql数据库,mysql经常被我们这样概述,“mysql是轻量级关系型数据库”,其实轻量级并不是说mysql是中小型 ...

  5. [nodejs]解决mysql和连接池(pool)自动断开问题

    最近在做一个个人项目,数据库尝试使用了mongodb.sqlite和mysql.分享一下关于mysql的连接池用法.项目部署于appfog,项目中我使用连接池链接数据库,本地测试一切正常.上线以后,经 ...

  6. Highcharts 散点图

    Highcharts 散点图 配置 chart 配置 配置 chart 的 type 为 'scatter' .chart.type 描述了图表类型.默认值为 "line". ch ...

  7. hdu 5800 To My Girlfriend(背包变形)

    To My Girlfriend Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  8. C++（笔记）浅析vector容器的实例

    http://www.runoob.com/w3cnote/cpp-vector-container-analysis.html 转载请注明出处 浅然的专栏 https://blog.csdn.net ...

  9. Spring核心思想——IOC和DI

    基本概念 IOC是什么?     IOC(Inversion of Control)控制反转,IOC是一种新的Java编程模式,目前很多轻量级容器都在广泛使用的模式. IOC解决了什么问题?      ...

  10. Windbg 调试工具32位/64位版本下载

    最新的Windbg调试工具32位/64位版本越来越不好下载了,这里通过CSDN的渠道给大家一个下载地址,帮助大家更好下载工具: https://github.com/EasyDarwin/Tools/ ...