!doctype html>
<html>
<head>
<meta charset="gbk">
<title>Tab </title>
<style>
*{margin: 0;padding: 0;}
.tab{
375px;
margin: 25px auto;
}
.tabTit li{
float: left;
123px;
height: 38px;
border: 1px solid #00f;
text-align: center;
background: #ccf;
line-height: 38px;
list-style: none;
}
.tabTit li:hover{
background: #aaf;
cursor: hand;
cursor: pointer;
}
.tabTit .select{
background: #99f;
}
.tabCon{
373px;
height: 400px;
border: 1px solid #00f;
border-top: none;
}
.tabCon h1{
font-size: 24px;
}
.tabCon p{
text-indent: 2em;
}
</style>
</head>
<body>
<div id='tab' class='tab'>
<ul id='tabTit' class='tabTit'>
<li class='select'>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class='tabCon'>
<h1 id='tabConTit'>title</h1>
<p id='tabInf'>some words ...............................................</p>
</div>
</div>
</body>
<script src='js/jquery.min.js'></script>
<script>
$('#tabTit li').click(function(){
var index = $(this).index();
$.getJSON('tab.json',function(data){
$('#tabConTit').html(data[index].tit);
$('#tabInf').html(data[index].con);
})
$(this).addClass('select').siblings().removeClass('select');
});
</script>
</html>