效果：

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. Hyper-V:利用差异磁盘安装多个Win2008

    签于成本的原因,在学习了解一项新的技术或是产品时,在没有部署到生产环境之中前,大家都会选择在虚拟机来搭建一套实验环境.但如何快速搭建呢?如何节省磁盘空间呢? 说到此都不得不说下Hyper-V的差异磁盘 ...

  2. 成为Java高手的25个学习要点

    成为Java高手的25个学习要点 想成为Java大牛吗?不妨来学习这25个要点. 1. 你需要精通面向对象分析与设计(OOA/OOD).涉及模式(GOF,J2EEDP)以及综合模式.你应该了解UML, ...

  3. requireJS入门学习

    前言 最近网上.群里各种随便看,随便学.暑期实习还没找到,昨天开题过了,好好学习吧.最近一直看到前端的ADM,CMD规范,然后网上各种找资料看,看了好几个牛人的博客,写的很好,然后自我感觉了解了点,介 ...

  4. Careercup - Microsoft面试题 - 5917873302142976

    2014-05-12 06:56 题目链接 原题: A link list contains following elements struct node{ int data; node* next; ...

  5. selenium随笔

    1.点击一个连接通常录制一个click命令,通常需要改变它到clickAndWait命令,确保案例暂停,新的页面完全被转载进来. 2.测试案例需要检查Web页的属性,需要assert和verify命令 ...

  6. ThinkPHP5 配置文件

    配置目录 系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应 ...

  7. 实战项目——获取图片中的GPS位置信息和拍摄时间

    今天突然看到有人写过获取图片中位置信息的程序.我觉得很有趣,也就自己实践了一下,研究了一下 话不多说,先上代码 #!/usr/bin/env python3 # -*- coding: utf-8 - ...

  8. java作业8

    interface Pet{ public String getName(); public String getColor(); public int getAge(); } class Cat i ...

  9. POJ 3104：Drying（二分）

    题目大意:你有一台机器可以烘干衣物,现在有n个衣物需要烘干,每件衣服都有一个值表示含水量,烘干机一秒可以烘干k滴水,一件衣服不在烘干机上时会每秒自动蒸发一滴水,求最少用多少时间烘干所有衣服. 分析: ...

  10. 【bzoj1520】[POI2006]Szk-Schools 费用流

    题目描述 输入 输出 如果有可行解, 输出最小代价,否则输出NIE. 样例输入 5 1 1 2 3 1 1 5 1 3 2 5 5 4 1 5 10 3 3 3 1 样例输出 9 题解 费用流 设xi ...