Javascript实现简单的选项卡
版权声明：本文为博主原创文章，未经博主同意不得转载。 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实现简单的选项卡的更多相关文章
- javascript简单的选项卡
实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- JS入门学习，写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
- 【Css】一个简单的选项卡
这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...
- Jquery简单的选项卡实现
概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...
- JavaScript设置简单的自动时间
下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...
- Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
- javaScript(2)---简单使用
javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...
- Javascript学习-简单测试环境
Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
- JavaScript中简单排序总结
JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...
随机推荐
- 设计模式--中介者模式C++实现
中介者模式C++实现 1定义 用一个中介对象封装一系列的对象交互,中介者使各个对象不需要显示的相互作用,从而使其耦合松散,而且可以独立的改变他们之间的交互 2类图 组成说明 Mediator抽象中介者 ...
- 1-22-shell脚本基本应用-实验手册
脚本应用思路 1. 确定命令操作(设计并执行任务) 2. 编写Shell脚本(组织任务过程) 3. 设置计划任务(控制时间,调用任务脚本) ------------------------------ ...
- 解决SecureCRT下spark-shell中scala无法删除问题
转自:http://blog.csdn.net/huanbia/article/details/51318278 问题描述 当使用SecureCRT来打开Spark-shell的时候,有时会出现如下问 ...
- 为什么需要超出48K的音频采样率，以及PCM到DSD的演进
网上很多观点说,根据采样定理,48K的音频采样率即可无损的表示音频模拟信号(人耳最多可以听到20K的音频),为何还需要96K, 192K等更高的采样率呢?最先我也有这样的疑问,毕竟采样定理是经过数学家 ...
- 12.18 微信扫码获取openid与登陆
官方文档: https://open.weixin.qq.com/ 1.先获取code 1-1 配置项目配置文件 wechat: mpAppId: wxd898fcb01713c658 mpAppSe ...
- charles抓包unknow
如果能抓到包,可是解析不出请求,那一定是证书问题,注意以下几点: 1.设备安装证书,注意要抓包的每一个设备都要安装证书,每一个设备! 2.pc端也要安装证书 如果以上两点都做到一定可以解析https请 ...
- Xcode 8 插件安装
1.删除旧插件 cd ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-in rm -rf ../Plug-ins 2.Xcode重 ...
- 关于php print_r
print_r (PHP 4, PHP 5, PHP 7) print_r — 打印关于变量的易于理解的信息. 描述¶ bool print_r ( mixed $expression [, bool ...
- SpringMVC札集(05)——SpringMVC参数回显
自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...
- Java泛型常见面试题
怀着崇拜的心情读完这篇文章,却发现作者不是原创,而不标注转载~所以转载地址不详~ 1. Java中的泛型是什么 ? 使用泛型的好处是什么? 这是在各种Java泛型面试中,一开场你就会被问到的问题中的一 ...