点击菜单栏实现内容切换

html代码：

<div  id="tab"> 
<span class="fspan">tab1 </span>

                <span>tab2</span>

                <span>tab3</span>

</div>
<div  id="tab_con">
<li class="fli">页面一</li>

                <li>页面二</li>

                <li>页面三</li>
</div>

css代码：

<style>

#tab{

        padding:0.8rem;
border-bottom:1px solid #eee

}

#tab span{

1. color: #7d7d7d;
   padding: 0.8rem 0.2rem;
   font-size: 1.6rem;
   

}

#tab .fspan{

color:#fabe00;
border-bottom: 2px solid #fabe00;

}

#tab_con{

color:#666;
padding:1rem;
overflow:hidden;
font-size:1.4rem;

}

#tab_con li{

       display:none;   //内容页默认为不可见

}

#tab_con .fli{

      display:block;   //当给li添加了fli的class后便显示为可见了

}

</style>

js代码：

<script>

var spans = document.getElementById("tab").getElementsByTagName("span"); //获取tab中的所有span标签赋的class的值给spans

var lis=document.getElementById("tab_con").getElementsByTagName("li");  //获取tab_con中的所有li标签的class的值赋给lis

//tab点击事件
for(var i = 0; i < spans.length; i++) {  
spans[i].onclick = function() {
change(this);        //点击时改变其class
}
}

//改变class的函数

function change(obj) {
for(var i = 0; i < spans.length; i++) {
if(spans[i] == obj) {         //判断span的class是否存在

spans[i].className = "fspan";   //改变其class为fspan，同时将fspan对应的css样式赋给了这个span标签

lis[i].className = "fli";       //改变其class为fli，同时将fli对应的css样式赋给了这个li标签
} else {                     //将class设为空，也就是说移除css样式使其不显示
spans[i].className = "";     
lis[i].className = "";
}
}

}

</script>