标签页的切换方法(DOM)
程序员文章站
2022-03-20 23:15:46
...
效果:
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>
上一篇: php类属性与类常量
推荐阅读
-
Yii实现单用户博客系统文章详情页插入评论表单的方法,yii表单
-
js实现简单选项卡与自动切换效果的方法_javascript技巧
-
HTML5<video>标签不能播放视频,<audio>标签不能播放音频的解决方法
-
CPropertySheet标签页 实现各个CPropertyPage页面之间的切换_html/css_WEB-ITnose
-
Word2010从第三页开始显示页码1的方法
-
Word怎么删除空白页在尝试各种方法后依然删除不了的可行方法
-
bootstrap-closable-tab可实现关闭的tab标签页插件
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
Bootstrap标签页(Tab)插件使用方法
-
Yii实现显示静态页的方法,yii实现静态_PHP教程