您的位置：首页 > Web前端 > JQuery

JQuery+Ajax Tab标签页

2016-01-26 00:00 609 查看

摘要: 一段JQuery +Ajax 的标签页实现

工程结构：

页面代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab-独行冰海</title>
<style>
* {
margin: 0;
padding: 0;
}

.tab {
width: 375px;
margin: 25px auto;
}

.tabTit li {
float: left;
width: 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 {
width: 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'>独行冰海的博客</h1>
<p id='tabInf'>独行冰海的博客创建于2006年8月，那时申请博客似乎是在邮箱申请的时候误点误撞的。到了2009年才开始动手写博客。渐渐发现博客的重要作用。</p>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.0.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>

Json：

[
{
"tit" : "独行冰海的博客",
"con" : "独行冰海的博客创建于2006年8月，那时申请博客似乎是在邮箱申请的时候误点误撞的。到了2009年才开始动手写博客。渐渐发现博客的重要作用。"
},
{
"tit" : "独行冰海的微博",
"con" : "独行冰海的微博创建时间有些晚了，已经是2012年的事情了，或许是在大学中过于封闭的生活所至，对于微博，一直没有很高的关注度，但不得不说，微博是专业信息汇集的一个好地方。"
},
{
"tit" : "独行冰海的教育之路",
"con" : "独行冰海在2011年踏上了教育的旅途，而今已经三年了，三年来，一直遵循着自己的原则：从不以从不以“地位”、“权力”为目标，只为了自己心底的梦、珍重的事、守护的情而奋斗。"
}
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航