<!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>
<title>tab页切换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function switchTab(ProTag, ProBox) {
for (i = 1; i < 5; i++) {
if ("tab" + i == ProTag) {
document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
} else {
document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
}
if ("con" + i == ProBox) {
document.getElementById(ProBox).style.display = "";
} else {
document.getElementById("con" + i).style.display = "none";
}
}
}
</script>
<style type="text/css">
*
{
padding: 0;
margin: 0;
line-height: 25px;
font-size: 12px;
list-style:none
}
#tabContainer
{
margin: 30px;
}
#tabContainer li
{
float: left;
width: 80px;
margin: 0 3px;
background: #efefef;
text-align: center;
}
#tabContainer a
{
display: block;
}
#tabContainer a.on
{
background: pink;
}
</style>
</head>
<body>
<div id="tabContainer">
<ul>
<li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">
命运</a></li>
<li id="tab2"><a href="#" onclick="switchTab('tab2','con2');this.blur();return false;">
运势</a></li>
<li id="tab3"><a href="#" onclick="switchTab('tab3','con3');this.blur();return false;">
缘分</a></li>
<li id="tab4"><a href="#" onclick="switchTab('tab4','con4');this.blur();return false;">
人生</a></li>
</ul>
<div style="clear: both">
</div>
<div id="con1">
命运是个神马玩意儿...
</div>
<div id="con2" style="display: none">
霉运也是一种运气...
</div>
<div id="con3" style="display: none">
缘份纯粹是蒙人的东西...
</div>
<div id="con4" style="display: none">
人生就是人"生"出来之后的过程...
</div>
</div>
</body>
</html>
分享到：
相关推荐
微信小程序小技巧系列《一》幻灯片，tab导航切换： http://www.wxapp-union.com/portal.php?mod=view&aid=70 微信小程序小技巧系列《二》show内容展示，上传文件编码问题 ： ...
+ Shift+滚轮上、下滚动：切换打开的标签页 + Ctrl+滚轮上、下滚动：放大、缩小字体 + 中间点击一个标签：关闭标签页 6. 删除地址栏中的历史记录：Firefox 可以记录下您的浏览历史，但某些情况下我们需要删除...
7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字...
7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字...
9.5.1 标签面板的构成及其运行流程：ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...
Visual Web Development 2005开发ASP.NET使用小技巧 ASP.NET 2.0 异步页面原理浅析 [1] [原] 自定义通用System.Web.UI.IHierarchicalDataSource简单实现 在 ASP.NET 2.0 中创建 Web 应用程序主题 ASP.NET 2.0 中的...
）简单的tab切换，要压住下边线哦左小图，右自适应宽度的布局，小三角箭头的应用箭头以及垂直排列tag标签，注意文字垂直居中，标签要水平对齐表格布局小应用，如何变得更精美复杂的下单列表筛选排序功能筛选价格功能...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R，修复！ Windows XP（包括 ...JS：javascript源文件 JSP：HTML网页，其中包含有对一个Java servlet...