用Js写内容切换选项卡
结构：
<!DOCTYPE html>
<html>
<head>
<title>内容切换选项卡</title>
<meta charset='utf-8'>
<style>...</style>
<script>...</script>
</head>
<body>
<div id="content">
<ul>
<li class="nav">新闻</li>
<li class="nav">咨询</li>
<li class="nav">帮助</li>
</ul>
<span></span>
<br/>
<p></p>
</div>
</body>
</html>
样式：
<style>
#content {
position:relative;
width:300px;
min-height:200px;
background:green;
opacity:0.6;
}
#content ul {
width:100%;
height:50px;
background:red;
margin:0px;
padding:0px;
}
#content span {
color:red;
font-size:24px;
}
#content ul li {
float:left;
width:30%;
height:100%;
font-size:24px;
list-style: none;
text-align:center;
line-height:50px;
margin-right:10px;
}
.nav {
background:grey;
}
.nav_target {
background:orange;
color:#fff;
}
</style>
逻辑：
<script>
window.onload = function(){
var ocontent=document.querySelector('#content');
var otitle = ocontent.getElementsByTagName('span');
var op = ocontent.getElementsByTagName('p');
var str_cont=['新闻...........................','咨询...........................','帮助...........................'];
var str_graphy=['2019年我国前两季度经济发展概况:2019年我国前两季度经济发展概况2019年我国前两季度经济发展概况','<dl><li>问题类型</li><li>问题描述</li><li>在线答疑</li><li>用户反馈</li></dl>','你可以通过‘咨询’栏目获得帮助！'];
//选中所有的li
var ali=document.querySelectorAll('.nav');
//初始化,'nav_target'是被选中的样式
var last=0;
ali[last].classList.add('nav_target');
otitle[0].innerHTML=str_cont[0];
op[0].innerHTML=str_graphy[0];
//给nav添加事件
for(var i=0; i<ali.length; i++){
//给每个li添加索引和点击事件
ali[i].index=i;
ali[i].onclick=function(){
//应用classList.toggle()方法,修改class
ali[last].classList.toggle('nav_target');
this.classList.toggle('nav_target');
otitle[0].innerHTML=str_cont[this.index];
op[0].innerHTML=str_graphy[this.index];
last=this.index;
}
}
}
</script>
