效果：

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. js基础之javascript函数定义及种类-普通涵数-自执行函数-匿名函数

    普通函数 1.不带参数 function fucname(){ alert("hello"); } funcname() 2.带参数 function funcname(arg){ ...

  2. Python 拓展之迭代器

    写在之前 今天来讲讲「迭代器」的内容,其实已经拖了好多天了,感觉再不写就要忘记了.「迭代」相信对你来说已经不陌生了,我前面曾经专门用一篇文章来讲,如果你已经没有什么印象的话,就再点进去看看(零基础学习 ...

  3. TopK-微博今日热门话题

    大纲 TopK on single node TopK on multiple nodes Realtime topK with low QPS Realtime topK with high QPS ...

  4. Selenium - WebDriver: Waits

    These days most of the web apps are using AJAX techniques. When a page is loaded to browser, the ele ...

  5. Java和C#中神奇的String

    Java String: String 类适用于描述字符串事物.该类是不可以被继承的.我们主要学习: 1字符串特性.字符串最大的特性:一旦被初始化就不可以被改变.重赋值只是改变了引用. 2字符串操作. ...

  6. javascript原生360 开机小动画

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. grep_awk_sed文本处理

    小技巧 1.删除0字节文件find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列ps -e -o “%C : %p : %z : %a”|sor ...

  8. [Gym101982M][思维好题][凸壳]Mobilization

    [gym101982M][思维好题][凸壳]Mobilization 题目链接 20182019-acmicpc-pacific-northwest-regional-contest-div-1-en ...

  9. 理解点击屏幕的事件响应--->对- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法的理解

    要理解这两个方法.先了解一下用户触摸屏幕后的事件传递过程. 当用户点击屏幕后,UIApplication 先响应事件,然后传递给UIWindow.如果window可以响应.就开始遍历window的su ...

  10. Python基础教程笔记 第二章

    本章的名字虽然叫列表和元组,但是本章讲的最多的是列表,元祖指讲了很少的一部分.因为元组和列表很多方面都是一样的. 列表和元组的区别:列表可以被修改,元祖不可以被修改. python包含的6种内建序列: ...