关闭

tab切换

81人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<style type="text/css">
		#title{width:300px;height: 50px;line-height:50px;background-color: #00f;text-align: center;}
		.tab{float: left;width: 100px;}
		#content{width: 300px;height: 200px;background-color: #f00;}
	</style>
</head>
<body>
	<div id="title">
		<div class="tab" onclick="changeTab(1)">页面一</div>
		<div class="tab" onclick="changeTab(2)">页面二</div>
		<div class="tab" onclick="changeTab(3)">页面三</div>
	</div>
	<div id="content">
		
	</div>
	<button onclick="page++;addList();">点击加载更多</button>
</body>
<script>
	var index = 0;
	var page=1;
	
	onload = function(){
		addList();
	} 
	function addList(){
		document.getElementById("content").innerHTML+= "<br>index:"+index+"page:"+page;
	}
	function changeTab(temp){
		document.getElementById("content").innerHTML="";
		//去后台交互
		page = 1;
		index= temp;
		addList();
	}
</script>
	

</html>


这样子我们就可以做到tab的互相切换以及加载更多了。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2396次
    • 积分:139
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档