效果：

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. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  2. ogre3D学习基础19 --- 材质的继承，纹理的滚动与旋转

    以上一节为基础,废话不多说. 首先新增一个节点,用于比较显示 //新增一个节点 ent = mSceneMgr->createEntity("Quad"); ent-> ...

  3. C++ map 的用法归纳2

    [尊重原著: http://blog.csdn.net/zcf1002797280/article/details/7847819] Map是c++的一个标准容器,它提供了很好一对一的关系,在一些程序 ...

  4. Python+Selenium练习篇之10-刷新当前页面

    本文介绍如何调用webdriver中刷新页面的方法. 相关脚本代码如下: # coding=utf-8import timefrom selenium import webdriver driver ...

  5. 01背包 HDU-1203

    这道题在网上找的题解基本都是用min找出概率最小,然后用1减去的答案,我在这采用max来做,虽然只是换了公式,但是其中出现的问题还是想记录下. I NEED A OFFER! Time Limit: ...

  6. DNS 劫持、HTTP 劫持与 DNS 污染

    本文为本人的学习笔记,不保证正确. DNS 劫持 指DNS服务器被控制,查询DNS时,服务器直接返回给你它想让你看的信息.这种问题常为 ISP 所为. 由于一般的的电脑的 DNS 服务器 的配置都为自 ...

  7. 如何删除本地docker images镜像

    背景 本地空间较小,想删除无效的docker镜像内容. 操作步骤 查看本地docker镜像 尝试删除本地镜像 发现无法直接删除镜像 原因分析: 有关联docker容器,无法删除 删除docker容器 ...

  8. XWW的难题（bzoj 3698）

    Description XWW是个影响力很大的人,他有很多的追随者.这些追随者都想要加入XWW教成为XWW的教徒.但是这并不容易,需要通过XWW的考核.XWW给你出了这么一个难题:XWW给你一个N*N ...

  9. pat 甲级 1135. Is It A Red-Black Tree (30)

    1135. Is It A Red-Black Tree (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  10. C# 读取计算机CPU,HDD信息

    public string getCpuInfo() //读取CPU信息 { ManagementClass mobj = new ManagementClass("Win32_Proces ...