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


多种方法实现Tab切换—面向过程&面向对象&Jquery方法

TAb切换思路一: 判断是否为当前点击对象,来增加类名和减少类名 要在面向过程的基础上改写成面向对象的方法,需要经过四个步骤: 1、创建构造函数 2、将变量变成对象的属性 3、将函数...
  • express_yourself
  • express_yourself
  • 2016年11月06日 23:11
  • 2579

Tab切换5种方法

原文:http://zhanfeng.blog.51cto.com/6109904/1017901 李老师用了三天的时间把Tab切换的效果讲给我们,感觉从中学到了很多很多,李老师的讲课一如既往的...
  • dong123dddd
  • dong123dddd
  • 2012年10月31日 23:48
  • 5961

vue组件学习5(tab切换)

vue组件tab切换
  • qq_20353887
  • qq_20353887
  • 2017年08月12日 17:13
  • 185

angularjs实现tab切换

angularjs实现tab切换 *{ margin: 0; padding: 0; } .box{ width:300px; ...
  • b1244154318
  • b1244154318
  • 2016年09月21日 21:56
  • 5702

Vue.js实现tab切换效果

Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue...
  • Coding_Jia
  • Coding_Jia
  • 2017年05月24日 22:19
  • 11939

漂亮的tab切换

效果: tab body { width: 700px; margin: 100px auto 0 auto; font-family: Arial, ...
  • lirui874125
  • lirui874125
  • 2014年07月02日 17:35
  • 508

使用angularJs实现tab切换

最近的项目客户要求使用angularJs,不得不说angularJs用起来确实方便。但是有些功能事件不会的话还是会用jq。其实在使用angularJs的时候,能不用jq最后还是不用jq,以免混乱、冲突...
  • JaneLittle
  • JaneLittle
  • 2017年04月11日 16:12
  • 3194

tab切换各种不同的解决方案

tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了。不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己遇到的情况做了一下总结...
  • zxfjnfjcn
  • zxfjnfjcn
  • 2017年09月08日 20:54
  • 229

angular自定义的tab切换

BootStrap Tab Component This is the content of the first tab. This is ...
  • qq_34629352
  • qq_34629352
  • 2016年10月07日 20:06
  • 516

纯CSS实现Tab切换 以及 CSS+JS实现Tab切换

纯CSS实现Tab切换 效果图 思路 代码 CSSJS实现Tab切换 效果图 思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 (让...
  • mixi9760
  • mixi9760
  • 2016年07月29日 15:52
  • 422
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab切换
举报原因:
原因补充:

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