效果：

1.点击“JAVA语言”

2.点击“C语言”

3.点击C++语言

代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>标签页的切换</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. #tab li{
  9. float:left;
  10. cursor: pointer;
  11. list-style-type:none;
  12. width:80px;
  13. height:40px;
  14. line-height:40px;
  15. text-align:center;
  16. cursor:pointer;
  17. }
  18. #container{position:relative;}
  19. #container1,#container2,#container3{
  20. width:300px;
  21. height:100px;
  22. padding:30px;
  23. position:absolute;
  24. top:40px;
  25. left:0;
  26. }
  27. #tab1,#container1{
  28. background-color: red;
  29. }
  30. #tab2,#container2{
  31. background-color: green;
  32. }
  33. #tab3,#container3{
  34. background-color: blue;
  35. }
  36. </style>
  37.  
  38. <script>
  39. function show(n)
  40. {
  41.     var x=document.querySelector("div[style]");
  42.     x.removeAttribute("style");
  43.     document.getElementById("container"+n).style.zIndex="1";
  44. }
  45. </script>
  46.  
  47. </head>
  48. <body>
  49.     <ul id="tab">
  50.         <li id="tab1" onclick="show(1);">JAVA语言</li>
  51.         <li id="tab2" onclick="show(2);">C语言</li>
  52.         <li id="tab3" onclick="show(3);">C++语言</li>
  53.     </ul>
  54.     <div id="container">
  55.         <div id="container1" style="z-index: 1;">JAVA语言是现今世界上最流行的语言</div>
  56.         <div id="container2">C语言是一种面向过程的语言</div>
  57.         <div id="container3">C++语言是面向对象的语言</div>
  58.     </div>
  59. <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. kubernetes大概的工作原理

    先放一张Kubernetes的架构图: 整体来看,是一个老大,多个干活的这种结构,基本上所有的分布式系统都是这样,但是里面的组件名称就纷繁复杂,下面将一一解析. 1.元数据存储与集群维护 作为一个集群 ...

  2. Python-S9-Day122-Python爬虫

    11 初识爬虫 11 初识爬虫 12 今日作业 11.1 初识黄页: 11.2 互联网就是一张大的蜘蛛网: 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种 ...

  3. jQuery操作DOM基础 - 创建节点

    案例:创建两个<li>元素节点,并且作为<ul>元素节点的子节点,添加到DOM树中 <!DOCTYPE html> <html lang="en&q ...

  4. Log4j官方文档翻译(八、文件输出)

    使用org.apache.log4j.FileAppender可以把日志写到文件中: FileAppender配置 immediateFlush 这个标志默认为true,是否每次有消息产生都自动flu ...

  5. BZOJ 1087：[SCOI2005]互不侵犯King（状压DP）

    [SCOI2005]互不侵犯King [题目描述] 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子 ...

  6. BZOJ 2813: 奇妙的Fibonacci

    2813: 奇妙的Fibonacci Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 497  Solved: 134[Submit][Status][ ...

  7. VS扩展工具

    原文发布时间为:2011-03-09 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/site/search ...

  8. mysql启动错误1067的解决

    安装后MYSQL5后,发现启动出错,有时启动正常,但加接时马上出错. 出错代码:1067 解决办法如下: 删除%windows%/my.ini    删除其它地方的my.ini    在mysql安装 ...

  9. [LeetCode] Count and Say 字符串

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  10. UBUNTU命令行下进程查看-终止

    ps ax   显示当前系统进程的列表 ps aux 显示当前系统进程详细列表以及进程用户 如果输出过长,可能添加管道命令 less  如  ps ax|less 查看具体进程,使用 grep命令如  ...