tab切换

原创 2016年08月30日 16:21:41
<!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的互相切换以及加载更多了。


jquery tab切换

  • 2017年10月27日 13:59
  • 48KB
  • 下载

js tab切换源码下载

  • 2017年10月24日 15:40
  • 2KB
  • 下载

JS---排他思想及Tab栏的切换

JS的排他思想及tab栏切换,利用数组,循环,自定义属性,通过标签名字选择等...
  • F__Rong
  • F__Rong
  • 2017年07月30日 18:15
  • 551

tab大图切换高端大气版

  • 2015年05月01日 23:02
  • 1.34MB
  • 下载

自动切换的tab

  • 2015年10月28日 16:01
  • 5KB
  • 下载

FragmentTabHost、Fragment实现底部点击切换Tab页面

1.aty package com.example.louisfragmenttabhostdemo;import android.annotation.SuppressLint; impo...

jquery tab切换重复使用

  • 2015年10月08日 16:07
  • 35KB
  • 下载

简单的tab切换

  • 2014年10月15日 11:55
  • 4KB
  • 下载

纯css实现Tab切换的两种方法

纯css实现tab切换
  • mr_fzz
  • mr_fzz
  • 2016年11月11日 13:02
  • 2629

兼容性超好的 tab切换

  • 2015年01月17日 09:58
  • 258B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab切换
举报原因:
原因补充:

(最多只允许输入30个字)