效果：

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. 虚拟架构就绪 | 谈谈Windows Server 2012 R2迁移这件小事

    我们所说的“新选择”包括操作系统升级——告别Windows Server 2003或2008,选择用什么样的姿势进行升级呢? 新年伊始,正是企业对自身IT基础设施进行评估的最佳时期.在多项评估项目里面 ...

  2. tomcat内存泄漏存入dump文件

    很多tomcat进程退出(或者进程假死),都是由于频繁的抛出OutOfMemeoryError导致的. 为了让tomcat退出前或者发生OutOfMemeoryError时自动dump堆栈信息,方便事 ...

  3. Asp.net自定义控件开发任我行（2）-TagPrefix标签

    摘要 前面我们已经做了一个最简单的TextBox的马甲,此篇文章,我们来讲讲自定义控件的标签.大家可能看到了上一篇中拖放进来的代码是 <cc1:TextEdit ID="TextEdi ...

  4. 使用dnspod遭遇的奇特问题以及背后的原因与临时解决方法

    由于园子里有不少用户在使用dnspod,我们觉得有必要将这两天blogjava.net域名在dsnpod遇到的奇特问题分享一下,以免再有人踩着这个坑. 12月11日,我们登录到dnspod的后台时,大 ...

  5. 48、android代码架构总结

    之前是按功能模块进行分类,现在随着功能模块越来越多,代码层次不再清晰,所以修改了工程结构: 之前: 经过修改现在: 1.更严谨的遵循mvc架构 bean目录存放的是数据模型 ui存储的是activit ...

  6. 【3Sum Closest 】cpp

    题目: Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  7. python批量爬取文档

    最近项目需要将批量链接中的pdf文档爬下来处理,根据以下步骤完成了任务: 将批量下载链接copy到text中,每行1个链接: 再读txt文档构造url_list列表,利用readlines返回以行为单 ...

  8. Moscow Pre-Finals Workshop 2016. Japanese School OI Team Selection. 套题详细解题报告

    写在前面 谨以此篇题解致敬出题人! 真的期盼国内也能多出现一些这样质量的比赛啊.9道题中,没有一道凑数的题目,更没有码农题,任何一题拿出来都是为数不多的好题.可以说是这一年打过的题目质量最棒的五场比赛 ...

  9. box-sizing重置

    html { /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box;*/ box-sizing: border-box; } *, ...

  10. 如何在Ionic2项目中使用第三方JavaScript库

    onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...