版权声明：本文为博主原创文章，未经博主同意不得转载。 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. Android----- 版本更新和 服务器下载新版本APK并安装

    前段时间有朋友问我版本更新的问题,所以来写一篇版本更新和APK下载并安装的博客. 版本更新,几乎在所有的项目中都用的到,一般是这样的流程,当进入APP首页是便会检测版本是否为最新版本,不是则提示你下载 ...

  2. are only available on JDK 1.5 and higher

    根本原因是项目中的一些配置包括jar包什么的根当前jdk版本(我刚开始用的是1.8的,好像是不支持低版本的springjar包),反正正确的思路是更改jdk版本是最合理的,叫我去把所有spring版本 ...

  3. netty-socketio整合springboot消息推送

    netty-socketio整合springboot消息推送 1.netty-socketio消息推送 1)在项目中常常涉及到消息推送的情况,消息推送要求的实时性,使用传统的方式已经不能满足需求了: ...

  4. 第十天 1-9 rhel7-文件的归档和压缩

    大纲:文件的归档和压缩1.tar命令的使用及参数解析tar.gz.bz/bz2文件的创建.查看及解压zip/unzip命令的使用 一.文件的归档和压缩 在我们的计算机中,经常会遇到有好多文件名相似或作 ...

  5. nyoj299——如何优雅的写矩阵快速幂

    Matrix Power Series 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Given a n × n matrix A and a positive i ...

  6. 4666 Hyperspace stl

    当时自己做的时候没有这么想,想的是每个象限去找一个无穷值来作为比较点.但是很麻烦 代码: #include <stdio.h> #include <string.h> #inc ...

  7. 高射炮打蚊子丨用Visual Studio 2017写最初级的C语言程序

    众所周知,Visual Studio号称全宇宙最强的IDE(集成开发环境),简直可以“秒天秒地秒空气”.我们看着各种技术大会上,大神们在台上用VS演示Demo溜得飞起,然而对于一些非技术专业同学或者是 ...

  8. python3与python2中的string.join()函数

    在python2中,string 模块中有一个join()函数,用于以特定的分隔符分隔源变量中的字符串,将其作为新的元素加入到一个列表中,例如: body=string.join(( "Fr ...

  9. 判断Git是否有新的提交

    公司要搭建CI,有这样一个需求:判断Git是否有新的提交,如果有的话拉取代码构建,如果没有不构建,Jenkins的搭建这里就不赘述了,主要讲一下判断这里. Jenkins需要安装插件Condition ...

  10. Android 贝塞尔曲线解析

    相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...