版权声明：本文为博主原创文章，未经博主同意不得转载。 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. flask学习(六)：URL传参

    1. 参数的作用:可以在相同的URL,但是指定不同的参数,来加载不同的数据 例如:简书上每一篇文章前面的URL相同,只是后面的参数不同 2. 在flask中如何使用参数: 注意: 1) 参数需要放在两 ...

  2. bzoj1014: [JSOI2008]火星人prefix splay+hash+二分

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  3. JAVA8新特性简单总结

    速度更快代码更少强大的StreamAPI便于并行最大化的减少空指针异常Lambda表达式<具体做什么事>和函数式接口Lambda表达式(也叫做闭包)它允许我们将一个函数当作方法的参数(传递 ...

  4. c++复习要点

    自增和自减运算符有前缀和后缀两种形式,都会改变对象,所以不能对常量对象操作. 前缀形式返回改变后的对象,返回*this. 后缀形式返回改变之前的值,所以必须创建一个代表这个值的独立对象并返回它,是通过 ...

  5. 用stringstream实现从数字到字符串的转化

    代码简单,字符串到数字和数字到字符串的写法类似. #include <sstream> #include <bits/stdc++.h> using namespace std ...

  6. buctoj——合法的出栈顺序

    题目描述 我们知道,一个入栈序列是{1,2,3}的合法出栈序列有{3,2,1},{1,2,3}等,而{3,1,2}是不合法的.现在冰语有一个长度为n的序列A(保证序列内数字唯一,且1<=A[i] ...

  7. linux下鼠标穿透和取消穿透--linux小白，大神无视

    最近在用qt写一个跨平台的软件,因为设置了无边框,并且我自己给程序窗口加了阴影,阴影范围又比较大 所以必须给阴影区域加上鼠标穿透才能有更好的体验. 上网查了一下,在windows下使用SetWindo ...

  8. Symmetrical Network Acceleration with EBS 12

    Andy Tremayne, my esteemed colleague and fellow blogger, has published a new whitepaper that discuss ...

  9. 2.spring cloud eureka client配置

    红色加粗内容表示修改部分 1.把server项目打成jar包并启动 在项目根目录cmd执行  mvn clean package -Dmaven.test.skip=true mavne仓库地址建议 ...

  10. LeetCode OJ：Jump Game II（跳跃游戏2）

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...