标签页的切换方法（DOM）

最新推荐文章于 2021-12-01 16:51:08 发布

deng88673

最新推荐文章于 2021-12-01 16:51:08 发布

阅读量285

点赞数

文章标签： java c/c++

原文链接：http://www.cnblogs.com/it-body/p/5844728.html

版权

效果：

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>

转载于:https://www.cnblogs.com/it-body/p/5844728.html

deng88673

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
标签页的切换方法（DOM）

效果：1.点击“JAVA语言”2.点击“C语言”3.点击C++语言代码：<!doctype html><html><head><meta charset="utf-8"><title>标签页的切换</title><style>*{margi...
复制链接

扫一扫