版权声明：本文为博主原创文章，未经博主同意不得转载。 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. KVM与XEN虚拟化环境究竟有何不同

    虚拟化的概念在近些年收到了很大程度上的普及,求其原因很简单:虚拟化能够最大程度利用资源,为企业节约成本.目前市面较受欢迎的虚拟架构主要有KVM.XEN和VMware,其中,KVM和XEN都是免费开源的 ...

  2. Java 里的异常(Exception)详解

    作为一位初学者, 本屌也没有能力对异常谈得很深入.   只不过Java里关于Exception的东西实在是很多. 所以这篇文章很长就是了.. 一, 什么是java里的异常   由于java是c\c++ ...

  3. lvs+keepalived+vsftp配置FTP服务器负载均衡

    LVS+Keepalive 实现服务器的负载均衡高可用一.安装两台机器的安装是一样的,这里只记录一遍.1. 下载LVS+Keepalive 所需安装包http://www.keepalived.org ...

  4. 基于Python的XSS测试工具XSStrike使用方法

    基于Python的XSS测试工具XSStrike使用方法 简介 XSStrike 是一款用于探测并利用XSS漏洞的脚本 XSStrike目前所提供的产品特性: 对参数进行模糊测试之后构建合适的payl ...

  5. java和python互相调用

      java和python互相调用  作者:xuaijun  日期:2017.1.1 python作为一种脚本语言,大量用于测试用例和测试代码的编写,尤其适用于交互式业务场景.实际应用中,很多网管系统 ...

  6. 使用wepy框架搭建微信小程序采坑记（一）

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  7. Jquery validation自定义验证

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

  8. Linux下第一次Node尝试

    由于需求所定,必须在服务器上使用nodejs,第一次使用过程记录下来. 首先是安装node,这里可以下载到各个版本的node:https://nodejs.org/download/ 我是进入rele ...

  9. modprobe lsmod

    modprobe是linux的一个命令,可载入指定的个别模块,或是载入一组相依的模块.modprobe会根据depmod所产生的相依关系,决定要载入哪些模块.若在载入过程中发生错误,在modprobe ...

  10. React之事件处理

    在react中,事件处理的写法和处理方式可能会和vue以及传统html有些不同. 一.事件名和默认行为阻止 事件名采用驼峰写法,并且方法名用大括号引入,而不是双引号: <button onCli ...