效果：

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）的更多相关文章

  1. selenium WebDriver 对浏览器标签页的切换

    关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...

  2. 用标签页TitleSwitch切换不通的控制器

    用标签页TitleSwitch切换不通的控制器 教程效果: 项目开发中效果: 各种源码: TitleSwitch.h 与 TitleSwitch.m (这个是修改过的升级版本) // // Title ...

  3. selenium多个标签页的切换（弹出新页面的切换）

    1_windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver.window_handles #获取全部页面句柄 for ...

  4. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  5. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  6. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  7. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  8. 换肤功能的实现以及监听storage实现多个标签页一起换肤

    1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[i ...

  9. 在QMainWindow中利用多个QDockWidget构成标签页tab（原创）

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

随机推荐

  1. Thread和Runnable的子类调用

    实现线程的两种方式: 继承Thread类. 实现Runnable接口. 下面是一个小案例: public class Thread和Runnable { public static void main ...

  2. linux环境搭建系列之jdk安装

    JDK是java软件开发包的简称,要想开发java程序就必须安装JDK.没有JDK的话,无法编译Java程序. 前提: linux centOS6.6 64位操作系统 ROOT账号 安装包的获取:官网 ...

  3. Leetcode 599.两个列表的最小索引总和

    两个列表的最小索引总和 假设Andy和Doris想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答 ...

  4. 菜鸟之路——git学习及GitHub的使用

    首先,感谢廖雪峰老师的git教程 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 ...

  5. redhat--1

    ---------------- ---------------- 免密码ssh远程登录设置 . In host1, copy the ssh-key to the host2 hosts # ssh ...

  6. node中fileSystem改promise

    请注意,fs的大部分函数回调只会返回一个error参数,所以只要判断error为false的情况下就返回成功,无论有没有第二个参数. 另外exists需要单独包装,因为第一个参数就代表返回内容 con ...

  7. php显示错误

    error_reporting(E_ALL); ini_set('display_errors', '1');    //将出错信息输出到一个文本文件 ini_set('error_log', dir ...

  8. HDU 4027 Can you answer these queries?（线段树区间开方）

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...

  9. docker 集群 kubernetes 1.8 构建

    1.环境说明:操作系统:CentOS7Kubernetes 版本:v1.8.3Docker 版本:v17.06-ce master  192.168.10.220  etcd  kube-apiser ...

  10. express中放置静态文件

    不使用模版引擎的话要直接添加html,可以使用express.static()中间件设定静态文件目录,然后将html文件放在里面,如:express默认静态文件目录为 app.use(express. ...