排他布局，点击不同导航，会显示不同的内容。关键在于给导航标签span设置自定义属性index用于索引。这样不同的导航索引对应下面不同内容。如：当点击产品：则显示对应的产品模块。obj.setAttribute("index",i); var numb=obj.getAttribute("index") ;具体的完整程序如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排他布局</title>
<style>
*{margin:0;padding:0; }
.hd{height:50px;
width:50%;
margin:0 auto;
border:2px dotted red;
cursor:pointer;
}
.hd span{
line-height:50px;
font-size:25px;
padding:0 53px;
background-color:deeppink;
}
.hd span.dj{background-color:blue;}/*点击后span变颜色*/
.bd{width:50%;
height:500px;
border:2px solid olivedrab;
margin:0 auto;
}
ul{list-style:none;}
.bd li{
height:500px;
background-color:sandybrown;
display:none;
}
.bd li.ddj{display:block;}
</style>
</head>
<body>
<div class="hd">
<span class="dj" >首页</span>
<span >新闻</span>
<span >产品</span>
<span >案例</span>
<span >联系我们</span>
</div>
<div class="bd">
<ul>
<li class="ddj">首页模块</li>
<li>新闻模块</li>
<li >产品模块</li>
<li>案例模块</li>
<li>联系我们模块</li>
</ul>
</div>
<script>
var oSpans=document.getElementsByClassName("hd")[0].getElementsByTagName("span");//获取span元素
var oLis=document.getElementsByClassName("bd")[0].getElementsByTagName("li");//获取li元素
for(var i=0;i<oSpans.length;i++){
oSpans[i].setAttribute("index",i); //定义自定义属性用来绑定对应顺序。点击之前把索引放在标签当中。
oSpans[i].onclick=function(){
for(var j=0;j<oSpans.length;j++){
oSpans[j].removeAttribute("class"); }//把所有的span元素的class选择器删除。
this.className="dj";//当前点击的span标签添加class标签。
var numb=this.getAttribute("index");//获取索引
for(var k=0;k<oLis.length;k++){
oLis[k].removeAttribute("class"); }//把所有的li元素的class选择器删除
oLis[numb].className="ddj";} }
</script>
</body>
</html>