JQuery+Ajax Tab标签页

最新推荐文章于 2021-08-05 19:28:16 发布

chengjie6793

最新推荐文章于 2021-08-05 19:28:16 发布

阅读量214

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2368115/blog/609297

版权

工程结构：

页面代码：

<!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年踏上了教育的旅途，而今已经三年了，三年来，一直遵循着自己的原则：从不以从不以“地位”、“权力”为目标，只为了自己心底的梦、珍重的事、守护的情而奋斗。"        
    }
]

转载于:https://my.oschina.net/u/2368115/blog/609297