tab切换

<!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的互相切换以及加载更多了。


阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

QQTab切换特效(源码)

2011年07月15日 413KB 下载

Android主流APP底部Tab效果制作

2017年09月01日 24.94MB 下载

jQuery+css实现tab切换效果

2018年01月09日 36KB 下载

网页原型tab切换

2013年04月27日 53KB 下载

MFC小程序文件空格和TAB切换

2011年05月05日 9.02MB 下载

简洁的tab切换代码

2014年08月29日 2KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭