<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document1111</title>
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery.js"></script>
<!--<![endif]-->
<style>
ul{overflow: hidden;}
ul li{
float:left;
margin-left: 10px;
list-style: none;
}
.active{
background:#ccc;
}
div{
width:500px;
height:500px;
border:1px solid #ddd;
background: gray;
margin-left:40px;
display: none;
}
.tab{
display: block;
}
</style>
</head>
</head>
<body style="width:10000px;height:10000px;">
<ul>
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab">选项卡1的内容</div>
<div>选项卡2的内容</div>
<div>选项卡3的内容</div>
</div>
</html>
<script>
js方法：选项卡
var lis=document.getElementsByTagName('li');
var divs=document.getElementsByTagName('div');
for(i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
for(i=0;i<lis.length;i++){
lis[i].className='';
divs[i].style.display='none';
}
this.className='active';
divs[this.index].style.display='block';
}
}
js方法2：
<style>
.classname{
display:none;
}
.active{
display: block;
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<div class="classname active">a1</div>
<div class="classname">a2</div>
<div class="classname">a3</div>
<div class="classname">a4</div>
<div class="classname">a5</div>
<script>
// 需求：点击li弹出li内的值
var li = document.querySelectorAll('li');
var divs = document.querySelectorAll('div');
for (var i = 0; i < li.length; i++) {
li[i].onclick = (function(m) {
return function(){
for (var i = 0; i < li.length; i++){
divs[i].style.display='none';
}
divs[m].style.display='block';
}
})(i);
}
$('li').click(function(){
var index=$(this).index();//获取序号
$('li').attr('class','');//移除属性
$(this).attr('class','active');//当前的追加class属性
$('div').hide();//先隐藏所有的div
$('div')[index].style.display='block';//展示当前的序号的div
$('div').eq(index).show().siblings('div').hide();
})
</script>