<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul,li{
list-style-type:none;
}
li{
width:50px;
height:30px;
background:white;
border:1px solid #CCC;
display:inline;
padding:8px;
cursor:pointer;
}
div{
width:400px;
height:100px;
border:1px #999999 solid;
display:none;
}
.active {
background:#333;
color:white;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
/*window.onload = function ()
{
var ali = document.getElementsByTagName('li');
var adiv = document.getElementsByTagName('div')
for(var i = 0; i < ali.length; i++)
{
ali[i].index = i;
ali[i].onclick = function ()
{
for(var i = 0; i < adiv.length; i++)
{
ali[i].className = '';
adiv[i].style.display = 'none';
}
ali[this.index].className = 'active';
adiv[this.index].style.display = 'block';
}
}
}*/
$(function ()
{
$('li').click(function ()
{
$('li').attr('class','');
$('div').css('display','none');
$(this).attr('class','active');
$('div').eq($(this).index()).css('display','block');
})
})
</script>
<title>无标题文档</title>
</head>
<body>
<ul>
<li >选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div style="display:block;">11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>
