效果：
1.点击“JAVA语言”
2.点击“C语言”
3.点击C++语言
启科网络PHP商城系统
下载
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
代码：
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>
