Javascript实现简单的选项卡

在线演示：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 οnclick="javascript:display(1);" style="background-color:#ccc;color:black;">数 据 库</li><li οnclick="javascript:display(2);">前台脚本</li><li οnclick="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实现简单的选项卡相关推荐

如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了javascript实现简单页面倒 ...
JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
javascript 代码_如何使您JavaScript代码简单易读
javascript 代码 by Arthur Arakelyan 通过亚瑟·阿拉克利安(Arthur Arakelyan) 如何使您JavaScript代码简单易读 (How to keep you ...
Javascript闭包简单理解
Javascript闭包简单理解原文:Javascript闭包简单理解提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...
用浏览器收藏夹的书签保存javascript的简单脚本
用浏览器收藏夹的书签保存javascript的简单脚本之前一直好奇别人是如何保存常用的javascipt脚本的油猴脚本,需要考虑整体的运行方式,有时还得专门写个按钮,需要一定基础记事本保存,用的 ...
JavaScript最简单的方法实现简易的计算器
文章目录前言一.效果图二.代码 1.HTML代码 2.CSS代码 3.JavaScript代码总结前言 JavaScript最简单的方法实现简易的加减乘除计算器一.效果图二.代码 1.H ...
js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...

Javascript实现简单的选项卡

Javascript实现简单的选项卡相关推荐

最新文章

热门文章