本文介绍一种使用JavaScript+Css设计生成的选项卡效果,只是这里的选项卡是静态的!
制作过程很简单,这里我使用的语言是asp.net(vs2010).
1.在新建的.aspx网页body标签中,写入下列代码
<form id="form1" runat="server">
<div id="a_0">
这是第一个选项卡,欢迎光临!
</div>
<div id="a_1">
这是第二个选项卡,欢迎来访!
</div>
<div id="a_2">
这是第三个选项卡,欢迎欢迎!
</div>
<div id="Layer1">
<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FFCC33" id="menu_0" onmouseover="show_whomenu(0)"><strong>选项卡A</strong></td>
<td align="center" bgcolor="#0099FF" id="menu_1" onmouseover="show_whomenu(1)"><strong>选项卡B</strong></td>
<td align="center" bgcolor="#0099FF" id="menu_2" onmouseover="show_whomenu(2)"><strong>选项卡C</strong></td>
</tr>
</table>
</div>
</form>
2.在head标签中,加入js文件
<script language=JavaScript type=text/javascript>
function show_whomenu(who3) {
for (var i = 0; i < 3; i++) { document.getElementById("a_" + i).style.display = "none"; }
for (var i = 0; i < 3; i++) { document.getElementById("menu_" + i).className = "s1"; }
document.getElementById("menu_" + who3).className = "s2";
document.getElementById("a_" + who3).style.display = "block";
}
</script>
3.编写css文件设置样式,并在.aspx文件头部引入css文件
#a_0 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:1;
background-color: #CCCCCC;
visibility: visible;
}
#a_1 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:2;
background-color: #00CCFF;
display:none;
}
#a_2 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:3;
background-color: #666600;
display:none;
}
#Layer1 {
position:absolute;
left:200px;
top:30px;
width:300px;
height:30px;
z-index:4;
}
.s1 {
background:#0099FF;
}
.s2 {
background:#FFCC33;
}
程序特别简单,实现的效果还算绚丽,下面展示一下,效果过程图,点击相应的选项卡,会显示相应的内容:
附:小程序源代码
分享到:
相关推荐
支持多个静态选项卡切换代码.zip
11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 ...
11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 ...
关键字可以具有排除运算符 - 手动UN / MUTE特定选项卡 - 所有控件的可更改键盘快捷键 - 始终保持焦点标签未取消的选项 - 始终保留所有选项卡以外的选项静态选项卡 - 函数以快速添加/删除列表/删除当前URL - 跨...
“网络的巨石”:Chrome的扩展端口 ...activeTab :此扩展从活动选项卡获取HTML文本和页面标题以生成整体 storage :此扩展名可以记住弹出窗口底部切换按钮的最后状态。 可选权限 http://*/*和https://*/*
我从这里使用了自定义代码和文档,然后更新并制作了自己的代码: : ... o code.css进入“ CSS”选项卡; o code.js进入“ JS”选项卡; o code.json进入“ FIELDS”标签; 根据您的需要进行自定义。
使用 Google Maps 静态 API、Cordova Geolocation API 和 Cordova Contacts API 您的界面具有以下要求: 三个选项卡,每个选项卡都加载屏幕顶部的三个屏幕之一。 一次只能看到三个屏幕页面中的一个。 需要有一个 ...
当样式表或内容更改时,这将自动打开带有网站的浏览器选项卡,BrowserSync将自动重新加载CSS或刷新整个页面。 建立 在/dist文件夹中构建网站的静态版本 npm run build 用法 该网站使用作为静态网站生成器,并使用 +...
npm安装npm run start,启动开发服务器,并在新的浏览器选项卡中打开您的应用npm run build,使用缩小的js包,缩小的css和所有其他静态文件填充dist文件夹。 在生产中使用这些文件,还为缩小的js / css文件创建源...
favicon.ico - bone101 网页的图标(显示在浏览器选项卡中) index.html - 重定向到 Support/bone101/index.html 的起始 bone101 页面 静态 - 包含非 HTML bone101 网页内容(javascript、css、图像等)的目录 支持...
我不想遍历菜单和选项卡来更改外观,打开/关闭时间戳,切换联接/部分/退出... 我想使用CSS。 我想利用DOM触发事件,以便可以轻松地插入第三方模块。 安装 安装node.js和节点包管理器安装节点模块(您可能需要sudo...
选项卡完成 所有代码编译/转译都是在客户端上进行的,因此可在任何静态服务器上使用。 即时结果,无需服务器回合 有条件地加载模块(仅下载使用的功能) 模板:入门模板和用户定义的模板 允许添加外部样式表和/或...
$ {color} -mode类,可轻松实现CSS主题可与任何NuxtJS目标(静态或服务器)和渲染(通用和spa)配合使用自动检测系统颜色选项卡之间的模式同步:counterclockwise_arrows_button:支持IE9 +:information:此模块使用...
语言:English ...##权限 - **所需的权限** - “ActiveTab”:此扩展名获取HTML文本和“活动”选项卡中的页面标题以生成单线 - “存储”:此扩展名记得弹出窗口中底部的最后一个状态的拨动按钮。 - **可选权限**
由“小部件”代表的“测试人员”按类别组织为选项卡。 窗口小部件具有初始“状态”,然后通过websockets不断对其进行修补。 定期运行或通过中断运行的测试可以更改此状态。 所有测试人员都具有通过/失败/未定义状态...
它将自动在不同的选项卡/浏览器/客户端之间同步重新加载,滚动事件,表单输入以及更多内容。 因此,您可以打开手机终端上显示的URL,以同时测试台式机和移动设备的布局! 建立生产项目: npm run build 在Windows上...
记忆游戏项目 该游戏是作为前端纳米学位项目构建的。 目的是演示对HTML,CSS和JavaScript的掌握程度。 Udacity项目说明 入门项目具有一些HTML和CSS样式,以显示Memory Game项目的静态版本。...其他可玩的选项: 下
14.1.2 文档选项卡 265 14.1.3 时间轴 265 14.1.4 工具箱 266 14.1.5 舞台 267 14.1.6 工作区 268 14.1.7 网格 268 14.1.8 标尺 269 14.1.9 常用面板 269 14.2 基本绘图工具 273 14.2.1 选择工具 273 ...
当前文档有五个选项卡:配置、作品集、页脚、资产和输出。 前四个将允许您设置故事的当前支持的部分。 查看保存在公开托管的 Google Drive 文件夹中的输出演示。 配置 此选项卡包含整个故事的元素和选项。 为
[增强]自定义下拉框、选项卡和多选框显示方式和多选分隔符 [更改]删除广告位时删除对应广告, 删除链接分类时删除对应链接 [更改]默认模板登录页添加广告 [增强]内链允许随机读取,自定义内链条数 [更改]重置菜单...