标签页的切换方法（DOM）
效果：
1.点击“JAVA语言”
2.点击“C语言”
3.点击C++语言
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签页的切换</title>
<style>
*{margin:0;padding:0;}
#tab li{
float:left;
cursor: pointer;
list-style-type:none;
width:80px;
height:40px;
line-height:40px;
text-align:center;
cursor:pointer;
}
#container{position:relative;}
#container1,#container2,#container3{
width:300px;
height:100px;
padding:30px;
position:absolute;
top:40px;
left:0;
}
#tab1,#container1{
background-color: red;
}
#tab2,#container2{
background-color: green;
}
#tab3,#container3{
background-color: blue;
}
</style> <script>
function show(n)
{
var x=document.querySelector("div[style]");
x.removeAttribute("style");
document.getElementById("container"+n).style.zIndex="1";
}
</script> </head>
<body>
<ul id="tab">
<li id="tab1" onclick="show(1);">JAVA语言</li>
<li id="tab2" onclick="show(2);">C语言</li>
<li id="tab3" onclick="show(3);">C++语言</li>
</ul>
<div id="container">
<div id="container1" style="z-index: 1;">JAVA语言是现今世界上最流行的语言</div>
<div id="container2">C语言是一种面向过程的语言</div>
<div id="container3">C++语言是面向对象的语言</div>
</div>
<body>
标签页的切换方法（DOM）的更多相关文章
- selenium WebDriver 对浏览器标签页的切换
关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...
- 用标签页TitleSwitch切换不通的控制器
用标签页TitleSwitch切换不通的控制器 教程效果: 项目开发中效果: 各种源码: TitleSwitch.h 与 TitleSwitch.m (这个是修改过的升级版本) // // Title ...
- selenium多个标签页的切换（弹出新页面的切换）
1_windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver.window_handles #获取全部页面句柄 for ...
- bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- 换肤功能的实现以及监听storage实现多个标签页一起换肤
1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[i ...
- 在QMainWindow中利用多个QDockWidget构成标签页tab（原创）
功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...
随机推荐
- 单例模式【python】
在python中,如需让一个类只能创建一个实例对象,怎么能才能做到呢? 思路:1.通过同一个类创建的不同对象,都让他们指向同一个方向. 2.让个类只能创建唯一的实例对象. 方法:用到 _ _new ...
- Apache Common-IO 使用
Apache Common-IO 是什么? Apache File 工具类,能够方便的操作 File 运行环境 jdk 1.7 commons-io 2.6 测试代码 package com.m.ba ...
- mac攻略(八) -- 神器zsh和iterm2的配置
1. 安装oh my zsh 安装命令: curl -L http://install.ohmyz.sh | sh 修改shell的方式: chsh -s /bin/zsh 2.安装cask( ...
- IOS开发学习笔记035-UIScrollView-自动滚动
让图片自动滚动的话,需要使使用定时器,循环计算当前页的页码.并且在拖动图片时停止计时器,停止拖动时启动计时器. 定时器 方法1: performSelector [self performSelect ...
- Python 操作 SQLite 数据库
写在之前 SQLite 是一个小型的关系型数据库,它最大的特点在于不需要单独的服务.零配置.我们在之前讲过的两个数据库,不管是 MySQL 还是 MongoDB,都需要我们安装.安装之后,然后运行起来 ...
- Block Nested-Loop 和 Batched Key Access
官方文档:https://dev.mysql.com/doc/refman/5.7/en/bnl-bka-optimization.html BNL和BKA是MySQL 表关联的两种关联算法 比如t1 ...
- 使用 Python 获取 Linux 系统信息
探索platform模块 platform模块在标准库中,它有很多运行我们获得众多系统信息的函数.让我们运行Python解释器来探索它们中的一些函数,那就从platform.uname()函数开始吧: ...
- ORA-12012: 自动执行作业 "SYS"."ORA$AT_OS_OPT_SY_21" 出错
oracle 12.2.0.1版本报错: Errors in file /u01/app/oracle/diag/rdbms/easdb/easdb2/trace/easdb2_j000_27520. ...
- 关于Android应用中图片占用内存浅谈
从事过移动端应用开发的童鞋应该都清楚,内存是非常宝贵的资源.如果能很好的利用有限的内存,对应用性能的提升会有很大的帮助.在实际应用开发中图片内存占整个应用非常大的比重,我们只有了解图片是如何加载到内存 ...
- 【线性基】51nod1312 最大异或和&LOJ114 k大异或和
1312 最大异或和 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题 有一个正整数数组S,S中有N个元素,这些元素分别是S[0] ...