核心提示：概述： 《DIV制作站内分类栏》。制作网页站内分类栏，实现事物信息的分类，让浏览者对事物信息一目了然，此文件只是初始文件，具体需求，由您来掌控。Web截图：代码详情：!DOCTYPE htmlhtml...
概述：
《DIV制作站内分类栏》。制作网页站内分类栏，实现事物信息的分类，让浏览者对事物信息一目了然，此文件只是初始文件，具体需求，由您来掌控。
Web截图：
代码详情：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="卡布奇诺奶茶的独特">
<meta name="Keywords" content="网站分类栏，DIV制作网站分类栏，DIV的显示与隐藏">
<meta name="Description" content="制作网页站内分类栏，实现事物信息的分类，让浏览者对事物信息一目了然，此文件只是初始文件，具体需求，由你来掌控。">
<title>DIV制作站内分类栏</title>
</head>
<style type="text/css">
/*
*container01模块样式
*/
.first{
width:90px;
height:30px;
border:1px solid #CCCCCC;
float:left;
}
.first:hover{background-color:#F2F2F2;}
/*
*辅助背景样式
*/
.auxiliary{
width:90px;
height:30px;
border:1px solid #CCCCCC;
float:left;
background-color:#CCCCCC;
}
/*
*displayPanel模块样式
*/
#one{
clear:left;
background:#FFFACD;
height:300px;
}
#one01{
clear:left;
background:#CEE881;
height:300px;
display:none;
}
#one02{
clear:left;
background:#AA7882;
height:300px;
display:none;
}
</style>
<script type="text/javascript" language="javascript">
/*
*DIV的显示与隐藏【古板-_-】
*/
function one(){
document.getElementById("one").style.display = "block";
document.getElementById("one01").style.display = "none";
document.getElementById("one02").style.display = "none";
}
function one01(){
document.getElementById("one").style.display = "none";
document.getElementById("one01").style.display = "block";
document.getElementById("one02").style.display = "none";
}
function one02(){
document.getElementById("one").style.display = "none";
document.getElementById("one01").style.display = "none";
document.getElementById("one02").style.display = "block";
}
/*
*DIV蒙版效果
*/
//创建一个匿名函数入口
window.onload = function(){
//声明查询相关选择器“container01”【注：在其前面要加个“#”符号-_-】
var container01 = document.querySelector("#container01");
//为其添加onclick函数
container01.onclick = function(e){
//声明创建target跳转元素
var target = e.target || srcElement;
Array.prototype.slice.call(this.children).forEach(function(value){
//所要跳转到的区域
value.className = "first";
});
//跳转至辅助背景样式“auxiliary”
target.className = "auxiliary";
}
}
</script>
<body>
<!--ele start-->
<p id="container">
<!--ele start-->
<p id="container01">
<p class="first auxiliary" onclick="one()">1</p>
<p class="first" onclick="one01()">2</p>
<p class="first" onclick="one02()">3</p>
</p>
<!--ele end-->
<!--ele start-->
<p id="displayPanel">
<p id="one">4</p>
<p id="one01">5</p>
<p id="one02">6</p>
</p>
<!--ele end-->
</p>
<!--ele end-->
</body>
</html>
