这个效果在很多网站中都比较常见，我暂且就叫它js锚点，整理出来方便自己以后用。。。
这个效果描述粗来呢就是假如有四个导航条四个内容区，点到相应的导航就出现相应的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width: 500px;
height: 350px;
margin: 100px auto;
border:1px solid #f40;
padding-top: 50px;
}
#list{
overflow: hidden;
margin-bottom: 20px;
}
#list li{
list-style: none;
width: 100px;
height:40px;
line-height: 40px;
text-align: center;
background: red;
float: left;
margin-left: 20px;
}
#list li a{
text-decoration: none;
font-family: "微软雅黑";
color:#fff;
}
#pro{
width: 100%;
height:289px;
border:1px solid #000;
position: relative;
}
p{
font-family: "微软雅黑";
position: absolute;
top:0;
left:120px;
display: none;
}
#list li.active{
background: #008000;
}
.p1{
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li class="active"><a href="">北京</a></li>
<li><a href="">天津</a></li>
<li><a href="">上海</a></li>
<li><a href="">重庆</a></li>
</ul>
<div id="pro">
<p class="p1">我是北京我是北京我是北京我是北京</p>
<p>我是天津我是天津我是天津我是天津</p>
<p>我是上海我是上海我是上海我是上海</p>
<p>我是重庆我是重庆我是重庆我是重庆</p>
</div>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var list = document.getElementById("list");
var oLi = list.getElementsByTagName('li');
var pro = document.getElementById("pro");
var oP = pro.getElementsByTagName('p');
for( var i=0;i<oLi.length;i++ ){
oLi[i].index = i;
oLi[i].onmouseover = function(){
for(var j=0;j<oP.length;j++){
if( this.index == j ){
oLi[j].className = 'active';
oP[j].className = 'p1';
}else{
oLi[j].className = '';
oP[j].className = '';
}
}
}
}
</script>
</body>
</html>
这是我点击天津的时候，效果图如下：
（主要是描述这个效果，布局嘛，就凑合看看···）
Paste_Image.png
这是我点击上海的时候，效果图如下：
Paste_Image.png
网友评论